/* imported from kx-admin.css */
/* Master admin panel — kx dialect (M22, polished r171). App-bundle-only
stylesheet reached through the @import list in client/components/app/style.css
(the css-modules loader hashes a bare JSX import, so an un-imported file
never styles anything — r169 shipped that way). Classes prefixed kxa-adm- to
stay collision-free. Reuses kx-analytics.css for the pill tab row / Apply CTA /
ghost Save / chips, and the app-global .kx-switch on/off switch (r359). */
/* ── labeled field: uppercase 10.5/600 grey label (AnalyticsView date_field) over
a kx input box (white, #E5E7EB hairline, 9px radius, Inter 13, 34px tall,
marker focus ring — the .kx-cinput family) ─────────────────────────────── */
.kx-admin__kxa-adm-field___1jSsc { display: inline-flex; flex-direction: column; vertical-align: top; min-width: 0; }
.kx-admin__kxa-adm-field___1jSsc > span {
font: 600 10.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #6B7280; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; white-space: nowrap;
}
.kx-admin__kxa-adm-in___3mLf-, .kx-admin__kxa-adm-sel___Jpz-I {
font: 400 13px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #111827; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 9px;
height: 34px; padding: 0 10px; outline: none; box-sizing: border-box; max-width: 100%;
-webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.kx-admin__kxa-adm-in___3mLf-[type=date] { padding-right: 6px; }
.kx-admin__kxa-adm-in___3mLf-[type=number] { -moz-appearance: textfield; }
.kx-admin__kxa-adm-in___3mLf-::placeholder { color: #9CA3AF; }
@media (hover: hover) { .kx-admin__kxa-adm-in___3mLf-:hover, .kx-admin__kxa-adm-sel___Jpz-I:hover { border-color: #D4D4D8; } }
.kx-admin__kxa-adm-in___3mLf-:focus, .kx-admin__kxa-adm-sel___Jpz-I:focus { border-color: #9FE8F1; box-shadow: 0 0 0 3px rgba(27,211,230,.14); }
.kx-admin__kxa-adm-in___3mLf-:disabled, .kx-admin__kxa-adm-sel___Jpz-I:disabled { background: #F9FAFB; color: #9CA3AF; }
/* native select: same box + a quiet stroke chevron on the right */
.kx-admin__kxa-adm-sel___Jpz-I {
padding-right: 28px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
/* compact in-table variant (policy edit cells) */
.kx-admin__kxa-adm-in___3mLf-.kx-admin__sm___3aQ40 { height: 30px; font-size: 12.5px; padding: 0 8px; }
/* ── form row: a real flex grid — fields bottom-aligned with the CTA ───── */
.kx-admin__kxa-adm-form___1oaxg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-bottom: 2px; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-ana-apply___29BsP, .kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-ana-save___3Lm0r { height: 34px; margin: 0; box-sizing: border-box; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-adm-hint___1qQm5 { font-size: 12px; color: #9CA3AF; display: inline-flex; align-items: center; height: 34px; }
/* filter bar (range + extra filters) */
.kx-admin__kxa-adm-bar___1DnFf { margin: 6px; padding: 12px 16px; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; }
/* ── status badges (tier / on-off in tables) ─────────────────────────────── */
.kx-admin__kxa-adm-badge___3cOif {
display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
background: #F4F4F5; color: #6B7280; white-space: nowrap; line-height: 1.5;
}
.kx-admin__kxa-adm-badge___3cOif.kx-admin__on___1GmUx { background: rgba(27,211,230,.15); color: #00838F; }
.kx-admin__kxa-adm-badge___3cOif.kx-admin__off___1zFNN { background: rgba(216,27,96,.10); color: #D81B60; }
.kx-admin__kxa-adm-badge___3cOif.kx-admin__warn___1eOjA { background: rgba(217,119,6,.12); color: #B45309; }
.kx-admin__kxa-adm-badge___3cOif.kx-admin__master___2n6PA { background: #111827; color: #EAF6F8; }
/* ── state chips (overview switches card): the r136 action-chip format — label
and state ride together in ONE grey pill; the state carries a dot ────── */
.kx-admin__kxa-adm-chips___1Iq4i { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kx-admin__kxa-adm-chip___jnIMl {
display: inline-flex; align-items: center; gap: 6px; background: #F4F4F5; color: #374151;
font: 600 11.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
border-radius: 999px; padding: 4px 11px 4px 9px; white-space: nowrap; line-height: 1.5;
}
.kx-admin__kxa-adm-chip___jnIMl i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9CA3AF; flex: none; }
.kx-admin__kxa-adm-chip___jnIMl b { font-weight: 700; color: #6B7280; }
.kx-admin__kxa-adm-chip___jnIMl.kx-admin__ok___OoMhf i { background: #1BD3E6; box-shadow: 0 0 0 2px rgba(27,211,230,.22); }
.kx-admin__kxa-adm-chip___jnIMl.kx-admin__ok___OoMhf b { color: #00838F; }
.kx-admin__kxa-adm-chip___jnIMl.kx-admin__bad___9-OUs { background: rgba(216,27,96,.10); color: #9F1239; }
.kx-admin__kxa-adm-chip___jnIMl.kx-admin__bad___9-OUs i { background: #D81B60; box-shadow: 0 0 0 2px rgba(216,27,96,.18); }
.kx-admin__kxa-adm-chip___jnIMl.kx-admin__bad___9-OUs b { color: #D81B60; }
/* ── On/Off = the app-global .kx-switch (r359; replaced the .kx-seg segmented pair — a switch flips on a
click anywhere; the segmented pair needed the exact side). The DANGEROUS state (Maintenance On) goes red
so the destructive direction is legible before the confirm even opens ───────────────────────────── */
.kx-admin__kxa-adm-switch___-q4St { vertical-align: middle; flex: none; }
/* switch rows (Platform switches card) */
.kx-admin__kxa-adm-switchrow___zpQAF { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #F0F1F3; }
.kx-admin__kxa-adm-switchrow___zpQAF:last-of-type { border-bottom: none; }
.kx-admin__kxa-adm-switchrow___zpQAF > div { flex: 1; min-width: 0; }
/* ── quiet destructive button (DESIGN_SYSTEM §4: red text, #FECACA hairline,
10px radius — never a pill) ─────────────────────────────────────────── */
.kx-admin__kxa-adm-danger___2KPVu {
background: #fff; border: 1px solid #FECACA; color: #DC2626; cursor: pointer; border-radius: 10px;
font: 600 12px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 0 11px; height: 30px; -webkit-appearance: none; appearance: none; white-space: nowrap; box-sizing: border-box;
}
@media (hover: hover) { .kx-admin__kxa-adm-danger___2KPVu:hover { background: #FEF2F2; border-color: #FCA5A5; } }
.kx-admin__kxa-adm-danger___2KPVu:disabled { opacity: .45; cursor: default; }
/* ── small ghost action (row-level) — the ghost pill standard, compact ──── */
.kx-admin__kxa-adm-ghost___cr1fE {
background: #fff; border: 1px solid #E5E7EB; color: #6B7280; cursor: pointer; border-radius: 999px;
font: 600 12px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 0 12px; height: 30px; -webkit-appearance: none; appearance: none; white-space: nowrap; box-sizing: border-box;
}
@media (hover: hover) { .kx-admin__kxa-adm-ghost___cr1fE:hover { color: #00838F; border-color: rgba(27,211,230,.5); background: #E4F8FB; } }
.kx-admin__kxa-adm-ghost___cr1fE:disabled { opacity: .45; cursor: default; }
@media (hover: hover) { .kx-admin__kxa-adm-ghost___cr1fE:disabled:hover { color: #6B7280; border-color: #E5E7EB; background: #fff; } }
.kx-admin__kxa-adm-acts___7T887 { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* ── organizations table: roomy rows — chips on top, their input stacked
under, toggles vertically centered, Manage right-aligned ─────────────── */
.kx-admin__kxa-adm-orgrow___HHBof td { padding-top: 14px !important; padding-bottom: 14px !important; }
.kx-admin__kxa-adm-orgrow___HHBof td.kx-admin__mid___3hoEq { vertical-align: middle !important; }
.kx-admin__kxa-adm-orgrow___HHBof td.kx-admin__right___2mcNZ { text-align: right; vertical-align: middle !important; min-width: 84px; }
.kx-admin__kxa-adm-chiplist___1leLU { display: flex; flex-wrap: wrap; gap: 4px 6px; min-height: 26px; }
.kx-admin__kxa-adm-chiplist___1leLU .kx-admin__kxa-ana-chip___2tpa6 { margin: 0; white-space: nowrap; }
.kx-admin__kxa-adm-chiplist___1leLU .kx-admin__kxa-ana-chip___2tpa6 .kx-admin__kxa-ana-chip-apply___JzdgI { white-space: normal; word-break: break-all; } /* admin emails may be long — wrap inside the pill */
.kx-admin__kxa-adm-inline___2fY-_ { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.kx-admin__kxa-adm-inline___2fY-_ .kx-admin__kxa-adm-in___3mLf- { height: 30px; font-size: 12.5px; padding: 0 9px; flex: 1 1 auto; min-width: 120px; }
/* notices */
.kx-admin__kxa-adm-notice___1mSjO {
margin: 10px 6px; padding: 10px 16px; border-radius: 10px; font-size: 13px;
background: rgba(27,211,230,.12); color: #00838F;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-admin__kxa-adm-notice___1mSjO.kx-admin__err___2zDn3 { background: rgba(216,27,96,.08); color: #D81B60; }
/* audit detail cell */
.kx-admin__kxa-adm-mono___2D-wl {
font: 11.5px 'SF Mono', Menlo, Consolas, monospace; color: #374151; max-width: 520px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom;
}
/* ── confirm dialog: two-tier modal system — one centered card, rose X pinned
to the TRUE top-right, eyebrow + Inter-800 22 title + grey body ───────── */
.kx-admin__kxa-adm-confirm___1ONsJ {
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
position: relative; padding: 22px 24px 20px;
}
.kx-admin__kxa-adm-confirm___1ONsJ .kx-admin__kx-xbtn___3OAry { position: absolute; top: 14px; right: 14px; }
.kx-admin__kxa-adm-confirm___1ONsJ h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #111827; margin: 6px 24px 10px 0; line-height: 1.25; }
.kx-admin__kxa-adm-confirm___1ONsJ p { font-size: 14px; line-height: 1.55; color: #6B7280; margin: 0 0 18px; }
.kx-admin__kxa-adm-confirm___1ONsJ .kx-admin__acts___3A61f { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.kx-admin__kxa-adm-confirm___1ONsJ .kx-admin__acts___3A61f .kx-admin__kxa-ana-apply___29BsP { margin-right: 0; }
.kx-admin__kxa-adm-confirm___1ONsJ .kx-admin__acts___3A61f .kx-admin__kxa-adm-danger___2KPVu { height: 32px; font-size: 12.5px; padding: 0 16px; }
/* ── tab row: wraps on desktop, scrolls on phones (the analytics pattern:
"Tab rows … Mobile: overflowX auto") ───────────────────────────────────── */
.kx-admin__kxa-adm-tabs___VW_On { flex-wrap: wrap; max-width: 100%; box-sizing: border-box; }
/* ── phones: one-column forms, full-width controls, nothing overflows ───── */
@media (max-width: 640px) {
/* r178 (founder mobile QA 2026-09-07): title / subtitle / tab rail breathe when they stack */
.kx-admin__kxa-adm-h1___E_9CU { margin: 10px 8px 6px 6px !important; }
.kx-admin__kxa-adm-sub___15bgF { margin: 0 6px 16px 6px !important; line-height: 1.5; }
.kx-admin__kxa-adm-tabs___VW_On { margin-top: 10px !important; }
.kx-admin__kxa-adm-tabs___VW_On {
display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; margin-left: 6px; margin-right: 6px;
}
.kx-admin__kxa-adm-tabs___VW_On::-webkit-scrollbar { display: none; }
.kx-admin__kxa-adm-tabs___VW_On button { flex: none; }
.kx-admin__kxa-adm-form___1oaxg { flex-direction: column; align-items: stretch; gap: 10px; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-adm-field___1jSsc { width: 100%; display: flex; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-adm-field___1jSsc > .kx-admin__kxa-adm-in___3mLf-, .kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-adm-field___1jSsc > .kx-admin__kxa-adm-sel___Jpz-I { width: 100% !important; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-ana-apply___29BsP, .kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-ana-save___3Lm0r { width: 100%; }
.kx-admin__kxa-adm-form___1oaxg .kx-admin__kxa-adm-hint___1qQm5 { height: auto; }
.kx-admin__kxa-adm-switchrow___zpQAF { flex-wrap: wrap; }
.kx-admin__kxa-adm-switchrow___zpQAF > div { flex: 1 1 100%; }
.kx-admin__kxa-adm-inline___2fY-_ { flex-wrap: wrap; }
.kx-admin__kxa-adm-mono___2D-wl { max-width: 260px; }
}
/* imported from kx-analytics.css */
/* Analytics — kx dialect (cohesion S4; mock design/proposals/app-redesign/shell.html §3).
App-bundle-only stylesheet; classes prefixed kxa-ana- to stay collision-free. */
/* pill tab row (replaces the MUI underline Tabs) */
.kx-analytics__kxa-ana-tabs___2OX0L {
display: inline-flex; background: #fff; border: 1px solid rgba(17,24,39,.1);
border-radius: 25px; box-shadow: 0 2px 8px rgba(2,20,26,.06);
padding: 4px; gap: 2px; margin-bottom: 16px;
}
.kx-analytics__kxa-ana-tabs___2OX0L button {
border: none; background: none; cursor: pointer;
font: 600 12.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #9CA3AF; padding: 7px 14px; border-radius: 20px; white-space: nowrap;
-webkit-appearance: none; appearance: none;
}
.kx-analytics__kxa-ana-tabs___2OX0L button.kx-analytics__on___1FW12 { color: #00838F; background: rgba(27,211,230,.15); }
@media (hover: hover) { .kx-analytics__kxa-ana-tabs___2OX0L button:hover { color: #00838F; } }
/* filter bar actions */
.kx-analytics__kxa-ana-apply___3lOJA {
background: linear-gradient(180deg,#24D3E6,#00B5CC); color: #fff; cursor: pointer;
font: 700 12.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 7px 18px; border-radius: 999px; border: 1px solid rgba(0,131,143,.35);
text-shadow: 0 1px 2px rgba(0,0,0,.2); margin-right: 18px;
-webkit-appearance: none; appearance: none;
}
.kx-analytics__kxa-ana-save___2Jwq4 {
background: #fff; border: 1px solid #E5E7EB; color: #6B7280; cursor: pointer;
font: 600 12.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 7px 14px; border-radius: 999px;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-analytics__kxa-ana-save___2Jwq4:hover { color: #00838F; border-color: rgba(27,211,230,.5); } }
/* saved-filter chips (kx tag-pill idiom + delete x) */
.kx-analytics__kxa-ana-chip___SDVXM {
display: inline-flex; align-items: center; margin: 2px 8px 2px 0; padding: 3px 6px 3px 12px;
border: 1px solid #E5E7EB; border-radius: 999px; font-size: 12px; background: #fff;
}
.kx-analytics__kxa-ana-chip-apply___jAGhG { cursor: pointer; font-weight: 700; color: #00838F; }
.kx-analytics__kxa-ana-chip-x___3gADq { cursor: pointer; margin-left: 7px; padding: 0 4px; color: #9CA3AF; border-radius: 50%; }
@media (hover: hover) { .kx-analytics__kxa-ana-chip-x___3gADq:hover { color: #D81B60; background: rgba(216,27,96,.1); } }
/* labeled doughnut (identity never color-alone) */
.kx-analytics__kxa-ana-donutwrap___eX1vG { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kx-analytics__kxa-ana-donutlbls___pwLJB { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.kx-analytics__kxa-ana-donutlbl___QL5bA {
font: 600 11px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #6B7280; white-space: nowrap;
}
.kx-analytics__kxa-ana-donutlbl___QL5bA i {
display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px;
}
.kx-analytics__kxa-ana-donutlbl___QL5bA b { color: #111827; font-weight: 700; }
/* r180 (founder mobile QA 2026-09-10): header rhythm when the title + subtitle stack —
tighter title→subtitle, more air subtitle→filter card, and the Apply button gets its own
breathing room under the wrapped From/To fields. Desktop untouched. */
@media (max-width: 640px) {
.kx-analytics__kxa-ana-h1___3lKFs { margin: 10px 8px 4px 6px !important; }
.kx-analytics__kxa-ana-sub___D0x7I { margin: 0 6px 18px 6px !important; line-height: 1.5; }
.kx-analytics__kxa-ana-filter___1QdWT { margin-top: 2px !important; padding-bottom: 14px !important; }
/* r204: air between the "FILTER EVERYTHING BELOW" heading and the From/To fields */
.kx-analytics__kxa-ana-filter-heading___ZIIoN { margin-bottom: 10px !important; }
.kx-analytics__kxa-ana-filter-row___3Ukhu { row-gap: 12px; }
.kx-analytics__kxa-ana-filter-row___3Ukhu .kx-analytics__kxa-ana-apply___3lOJA { margin-top: 4px; }
/* r210 (founder mobile QA 2026-09-13): master/org have six tabs — the pill row
overflowed the phone and the tail (AI & Memory, Me) was unreachable. The row
itself now scrolls sideways (scrollbar hidden), tighter pills so more fit. */
.kx-analytics__kxa-ana-tabs___2OX0L { display: flex; max-width: 100%; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none; margin-left: 6px; margin-right: 6px; }
.kx-analytics__kxa-ana-tabs___2OX0L::-webkit-scrollbar { display: none; }
.kx-analytics__kxa-ana-tabs___2OX0L button { padding: 7px 11px; font-size: 12px; flex: 0 0 auto; }
}
/* imported from InfiniteLoader.example.css */
/*.ReactVirtualized__Grid__innerScrollContainer {*/
/*background-color: #F5F5F5; !*grey100*!*/
/*}*/
.InfiniteLoader-example__List___2MrtJ {
width: 100%;
/*border: 0px solid #DDD;*/
border: 0;
outline: 0; /*TODO: might be needed for accessibility. can also use color with zero opacity*/
}
.InfiniteLoader-example__row___3ivvy {
margin-bottom: 5px;
}
.InfiniteLoader-example__placeholder___o_Ggc {
display: inline-block;
height: 1em;
background-color: #DDD;
}
.InfiniteLoader-example__cacheButtonAndCountRow___36E3M {
display: flex;
align-items: center;
}
.InfiniteLoader-example__button___5XgMe {
flex: 0 0 auto;
background-color: #4db6ac;
color: #fff;
appearance: none;
border: none;
padding: .5em 1em;
border-radius: .35em;
font-size: 1em;
}
.InfiniteLoader-example__cacheCountRow___391XL {
flex: 1 1 auto;
text-align: right;
color: #bdbdbd;
font-size: .75em;
font-weight: 100;
}
/* imported from InfiniteLoader.example.css */
.InfiniteLoader-example__List___x4dBt {
width: 100%;
/*border: 1px solid #DDD;*/
}
.InfiniteLoader-example__row___2HBMF {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 25px;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
}
.InfiniteLoader-example__placeholder___KuZiS {
display: inline-block;
height: 1em;
background-color: #DDD;
}
.InfiniteLoader-example__cacheButtonAndCountRow___1BCty {
display: flex;
align-items: center;
}
.InfiniteLoader-example__button___1p-SJ {
flex: 0 0 auto;
background-color: #4db6ac;
color: #fff;
appearance: none;
border: none;
padding: .5em 1em;
border-radius: .35em;
font-size: 1em;
}
.InfiniteLoader-example__cacheCountRow___2-qNY {
flex: 1 1 auto;
text-align: right;
color: #bdbdbd;
font-size: .75em;
font-weight: 100;
}
/* imported from kx-documents.css */
/* kx documents area (cohesion S4 — documents.html mock). App bundle only;
all classes kxa-doc- prefixed. Shared kx primitives (kx-popcard, kx-menurow,
kx-xbtn, kx-upanel…) come from the overlay stylesheet via the app @import. */
/* ⋮ card trigger */
.kx-documents__kxa-doc-more___Ss7Q8 {
width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
color: #374151; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; transition: background .15s, color .15s;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-doc-more___Ss7Q8:hover { background: rgba(27,211,230,.12); color: #00838F; } }
.kx-documents__kxa-doc-more___Ss7Q8 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Experimental chip (proxy row) */
.kx-documents__kxa-doc-exp___adS2n {
font: 600 9px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .08em; text-transform: uppercase; color: #B45309;
background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 99px;
padding: 1px 7px; margin-left: auto;
}
/* mono section label */
.kx-documents__kxa-doc-galbl___1-ePL {
font: 600 10px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .13em; text-transform: uppercase; color: #8B95A1; margin: 14px 0 7px;
}
/* explained radio cards (Access-panel idiom) */
.kx-documents__kxa-doc-gaopt___XmF7m {
display: flex; align-items: center; gap: 11px; border: 1px solid #E5E7EB;
border-radius: 12px; padding: 9px 12px; margin-bottom: 7px; cursor: pointer;
background: #FFFFFF; font-family: 'Inter Regular', Inter, -apple-system, sans-serif;
transition: background .15s, border-color .15s;
}
.kx-documents__kxa-doc-gaopt___XmF7m b { display: block; font-size: 13.5px; line-height: 1.3; color: #111827; }
.kx-documents__kxa-doc-gaopt___XmF7m .kx-documents__d___227ah { display: block; color: #6B7280; font-size: 12px; }
.kx-documents__kxa-doc-gaopt___XmF7m .kx-documents__chk___3FrfA { margin-left: auto; color: #C6CDD4; display: inline-flex; flex-shrink: 0; }
.kx-documents__kxa-doc-gaopt___XmF7m.kx-documents__on___231uN { background: #F0FBFD; border-color: rgba(27,211,230,.5); }
.kx-documents__kxa-doc-gaopt___XmF7m.kx-documents__on___231uN .kx-documents__chk___3FrfA { color: #0097A7; }
.kx-documents__kxa-doc-gaopt___XmF7m svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* labeled type filter chips */
.kx-documents__kxa-doc-fchip___3ZGkj {
display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E5E7EB;
background: #FFFFFF; border-radius: 99px; padding: 6px 13px; cursor: pointer;
font: 600 12.5px 'Inter Regular', Inter, -apple-system, sans-serif; color: #6B7280;
transition: background .15s, border-color .15s, color .15s;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-doc-fchip___3ZGkj:hover { border-color: rgba(27,211,230,.45); } }
.kx-documents__kxa-doc-fchip___3ZGkj.kx-documents__on___231uN {
background: rgba(27,211,230,.12); border-color: rgba(27,211,230,.45);
color: #00838F; font-weight: 700;
}
.kx-documents__kxa-doc-fchip___3ZGkj svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* date-bucket caption */
.kx-documents__kxa-doc-bucket___3bVX9 {
font: 600 10.5px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .14em; text-transform: uppercase; color: #8B95A1; margin: 20px 0 10px;
}
/* document/summary hero card (documents.html §2 — gathers title, meta, tags,
Visit-site CTA, and the owner tools that used to float loose) */
.kx-documents__kxa-doc-hero___qYigL {
background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
font-family: 'Inter Regular', Inter, -apple-system, sans-serif;
/* r324 (founder QA): the summary route has no top inset of its own, so the hero card used to
sit flush under the top bar — a breath of air above the first card, like every other page */
margin-top: 12px;
}
.kx-documents__kxa-doc-ftile___37N3x {
width: 52px; height: 52px; border-radius: 13px; background: rgba(27,211,230,.12);
display: flex; align-items: center; justify-content: center; color: #0097A7;
flex: none; overflow: hidden;
}
.kx-documents__kxa-doc-htitle___39Z7- { font-size: 21px; line-height: 1.3; font-weight: 800; color: #111827; margin: 2px 0 4px; }
/* r201 (founder QA 2026-09-12): structured meta. Line 1 = inline items joined by a
middot (domain ONCE · kind · Saved date) — inline so a long hostname wraps
inside its own item instead of pushing the column; line 2 = muted stat chips */
.kx-documents__kxa-doc-hmeta___1A7Ao { color: #6B7280; font-size: 13px; line-height: 1.55; margin-bottom: 8px; overflow-wrap: anywhere; }
.kx-documents__kxa-doc-hmeta___1A7Ao b { color: #374151; }
.kx-documents__kxa-doc-hmi___5nQvJ { display: inline; }
.kx-documents__kxa-doc-hmi___5nQvJ.kx-documents__nw___kmyR5 { white-space: nowrap; } /* the date never breaks mid-value — it moves to the next line whole */
.kx-documents__kxa-doc-hmi___5nQvJ:not(:last-child)::after { content: '\B7'; margin: 0 7px; color: #C5CAD1; } /* trailing dot: a wrapped item starts its line clean */
.kx-documents__kxa-doc-hmi___5nQvJ .kx-documents__kx-ic___3rGbK { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: #9CA3AF; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kx-documents__kxa-doc-hstats___RIhr1 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kx-documents__kxa-doc-hstat___3IQDX {
display: inline-flex; align-items: center; gap: 5px; background: #F4F4F5; color: #6B7280;
border-radius: 99px; padding: 3px 10px; font: 600 12px 'Inter Regular', Inter, -apple-system, sans-serif;
line-height: 1.5; white-space: nowrap;
}
.kx-documents__kxa-doc-hstat___3IQDX b { color: #374151; font-weight: 700; margin-right: -2px; }
/* r223: the poll chip is a button (scrolls to the Polls unit) — same chip look, pointer + wash on hover-capable devices */
.kx-documents__kxa-doc-hstat-btn___1wl_Z { cursor: pointer; border: none; font: 600 12px 'Inter Regular', Inter, -apple-system, sans-serif; -webkit-appearance: none; appearance: none; transition: background .12s, color .12s; }
@media (hover: hover) { .kx-documents__kxa-doc-hstat-btn___1wl_Z:hover { background: rgba(27,211,230,.14); color: #00707E; } .kx-documents__kxa-doc-hstat-btn___1wl_Z:hover .kx-documents__kx-ic___3rGbK { color: #0097A7; } }
.kx-documents__kxa-doc-hstat-btn___1wl_Z:focus { outline: none; }
.kx-documents__kxa-doc-hstat-btn___1wl_Z:focus-visible { box-shadow: 0 0 0 2px #1BD3E6; }
.kx-documents__kxa-doc-hstat___3IQDX .kx-documents__kx-ic___3rGbK { width: 12px; height: 12px; color: #9CA3AF; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kx-documents__kxa-doc-htags___2aBbO { display: flex; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.kx-documents__kxa-doc-htags___2aBbO .kx-documents__kx-tpill___1Fkea { text-decoration: none; cursor: pointer; }
@media (hover: hover) { .kx-documents__kxa-doc-htags___2aBbO .kx-documents__kx-tpill___1Fkea:hover { background: rgba(27,211,230,.14); } }
/* r254: the title column has a floor. It used to be flex:1;min-width:0, so the
unshrinkable side column squeezed it to one or two words per line instead of
wrapping itself to the next row. */
.kx-documents__kxa-doc-hmain___1dVF9 { flex: 1 1 340px; min-width: min(340px, 100%); }
.kx-documents__kxa-doc-hside___3Dc0r { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; flex: none; margin-left: auto; }
/* r254: the "Add Kontxt, then visit site" pill on the hero's own type (it used to
carry the old MUI palette: grey50 fill, 25px radius, bold links) */
.kx-documents__kxa-doc-hcta___1N_n7 {
display: inline-flex; align-items: center; gap: 6px; max-width: 232px;
border: 1px solid #E5E7EB; background: #FFFFFF; color: #6B7280; border-radius: 99px;
padding: 6px 13px; line-height: 1.45; text-align: left;
font: 600 12px 'Inter Regular', Inter, -apple-system, sans-serif;
}
.kx-documents__kxa-doc-hcta___1N_n7 a { color: #0097A7; font-weight: 700; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .kx-documents__kxa-doc-hcta___1N_n7 a:hover { text-decoration: underline; } }
.kx-documents__kxa-doc-hcta___1N_n7 .kx-documents__kx-ic___3rGbK { width: 14px; height: 14px; flex: none; color: #9CA3AF; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* founder QA 2026-09-01: on phones the unshrinkable side column starved the
title column (one word per line) — wrap it to its own full-width row */
@media (max-width: 640px) {
.kx-documents__kxa-doc-hside___3Dc0r { flex-basis: 100%; margin-left: 0; align-items: flex-start; }
}
/* hero ghost pill (Background / Promote owner tools) */
.kx-documents__kxa-doc-ghost___28Cdk {
display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E5E7EB;
background: #FFFFFF; color: #374151; border-radius: 99px; padding: 5px 12px;
cursor: pointer; font: 600 12px 'Inter Regular', Inter, -apple-system, sans-serif;
transition: border-color .15s, background .15s;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-doc-ghost___28Cdk:hover { border-color: rgba(27,211,230,.45); background: #F9FAFB; } }
.kx-documents__kxa-doc-ghost___28Cdk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* count chip (traffic chip on the hero; comment/poll chips on outline rows) */
.kx-documents__kxa-doc-chip___Sexxh {
display: inline-flex; align-items: center; gap: 4px; border: none;
background: #F4F4F5; color: #6B7280; border-radius: 99px; padding: 2px 9px;
cursor: pointer; font: 700 11px 'Inter Regular', Inter, -apple-system, sans-serif;
line-height: 1.6; -webkit-appearance: none; appearance: none;
}
.kx-documents__kxa-doc-chip___Sexxh.kx-documents__cy___3h8rP { background: rgba(27,211,230,.14); color: #00707E; }
.kx-documents__kxa-doc-chip___Sexxh svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* outline excerpt rows (the overlay Overview drawer idiom) */
.kx-documents__kxa-doc-ovrow___2ioip {
display: flex; gap: 12px; padding: 12px 10px; border-bottom: 1px solid #F0F1F3;
align-items: flex-start; font-family: 'Inter Regular', Inter, -apple-system, sans-serif;
}
.kx-documents__kxa-doc-ovrow___2ioip:last-child { border-bottom: none; }
.kx-documents__kxa-doc-ovbar___N4o1G { width: 4px; border-radius: 2px; align-self: stretch; flex: none; min-height: 20px; }
.kx-documents__kxa-doc-ovex___1qdQc { flex: 1; min-width: 0; font-size: 13.5px; color: #111827; line-height: 1.5; }
.kx-documents__kxa-doc-ovside___AqBKs { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
/* whose-highlights pager */
.kx-documents__kxa-doc-pager___2GxCs { display: flex; align-items: center; gap: 6px; }
.kx-documents__kxa-doc-uwrap___2xxDQ { position: relative; display: inline-flex; }
.kx-documents__kxa-doc-uc___2407O {
position: absolute; top: -2px; right: -4px; min-width: 15px; height: 15px;
border-radius: 8px; background: #D81B60; color: #FFFFFF;
font: 700 9.5px/15px 'Inter Regular', Inter, -apple-system, sans-serif;
text-align: center; padding: 0 4px; box-shadow: 0 0 0 1.5px #FFFFFF; box-sizing: content-box;
}
/* screen-reader-only label (kept in innerText for a11y + test selectors) */
.kx-documents__kxa-doc-sr___25kDe {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* card footer actions — founder QA 2026-09-01: unified to the POST pill
format (.kxa-soc-achip): icon + number ride together inside one grey pill,
instead of a bare teal icon with a separately-circled count */
.kx-documents__kxa-doc-fa___21F8E {
display: inline-flex; align-items: center; gap: 5px; border: none;
background: #F4F4F5; color: #374151;
font: 600 11.5px 'Inter Regular', Inter, -apple-system, sans-serif;
border-radius: 999px; padding: 4px 11px; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-doc-fa___21F8E:hover { background: #ECECEE; } }
/* r354: the "·" between a chip's verb and its count (opt-in, the folder header's Ask AI) */
.kx-documents__kxa-doc-fa___21F8E .kx-documents__kxa-doc-sep___3nhFh { color: #9CA3AF; margin: 0 1px; font-weight: 400; }
.kx-documents__kxa-doc-fa___21F8E .kx-documents__kxa-doc-cnt___fevCL {
font-weight: 700; font-size: 11.5px; background: transparent; color: inherit;
border-radius: 0; padding: 0;
}
.kx-documents__kxa-doc-fchip___3ZGkj .kx-documents__kxa-doc-cnt___fevCL {
font-weight: 700; font-size: 10.5px; background: rgba(27,211,230,.12); color: #00707E;
border-radius: 99px; padding: 1px 6px;
}
.kx-documents__kxa-doc-fchip___3ZGkj.kx-documents__on___231uN .kx-documents__kxa-doc-cnt___fevCL { background: rgba(27,211,230,.22); }
.kx-documents__kxa-doc-fa___21F8E.kx-documents__liked___3ht-f { background: rgba(27,211,230,.12); color: #00838F; }
.kx-documents__kxa-doc-fa___21F8E.kx-documents__ai___3ReWQ { background: linear-gradient(135deg, rgba(27,211,230,.18), rgba(255,92,138,.14)); color: #00838F; }
.kx-documents__kxa-doc-fa___21F8E svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* r15: the ONE search pill (documents toolbar; reused by FoldersView + the
Feed/Explore embeds). White, cardLine border, pill radius, icon inside. */
.kx-documents__kxa-pill-search___1a3mE {
display: flex; align-items: center; background: #FFFFFF;
border: 1px solid #E5E7EB; border-radius: 999px; padding: 0 10px 0 14px;
box-shadow: 0 1px 2px rgba(2,20,26,.05);
}
.kx-documents__kxa-pill-search___1a3mE > .kx-documents__material-icons___27OuL { font-size: 19px; color: #9CA3AF; margin-right: 7px; flex: none; }
.kx-documents__kxa-pill-search___1a3mE:focus-within { border-color: rgba(27,211,230,.45); }
/* r15: kx toolbar popup rows (owner/sort/views) — marker wash over MUI's grey */
@media (hover: hover) { .kx-documents__kxa-tbm-item___3OQ7r:hover { background-color: rgba(27,211,230,.12) !important; } }
/* r15: owner-filter trigger (was a MUI FlatButton) */
.kx-documents__kxa-tb-owner___2ksgI {
display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
cursor: pointer; padding: 10px 14px; white-space: nowrap;
font: 600 14px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #111827; border-radius: 999px;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-tb-owner___2ksgI:hover { background: rgba(27,211,230,.08); } }
.kx-documents__kxa-tb-owner___2ksgI svg {
width: 14px; height: 14px; fill: none; stroke: #6B7280; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); flex: none;
}
@media (hover: hover) { .kx-documents__kxa-tb-owner___2ksgI:hover svg { stroke: #0097A7; } }
/* round 16: uniform document-card media + type ramp */
.kx-documents__kxa-doc-media___3t10M { height: 220px; overflow: hidden; background: #F9FAFB; }
.kx-documents__kxa-doc-media___3t10M img { width: 100% !important; height: 220px !important; object-fit: cover; display: block; }
/* the favicon overlap chip lives INSIDE the media wrapper — the cover rule above
was stretching its 16px ico to 100%x220 (the blur). Higher specificity + important wins back. */
.kx-documents__kxa-doc-media___3t10M .kx-documents__kxa-doc-favov___xfAtH img { width: 18px !important; height: 18px !important; object-fit: contain; }
.kx-documents__kxa-doc-ctitle___33PvR { font-size: 16.5px; font-weight: 700; color: #111827; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kx-documents__kxa-doc-desc___3x5nd { margin: 10px 0 13px; color: #6B7280; font-size: 13.5px; line-height: 1.5; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ---- round 18 ---- */
/* card-header TYPE glyph (mirrors the toolbar filter-chip icon set) */
.kx-documents__kxa-doc-typeic___soIv9 { display: inline-flex; align-items: center; color: #6B7280; }
.kx-documents__kxa-doc-typeic___soIv9 .kx-documents__kx-ic___3rGbK { width: 16px; height: 16px; }
/* Add-to-Browser dialog (renders in an MUI portal OUTSIDE #root, so these are
deliberately UNSCOPED — the #root-scoped kx arms never reach that subtree) */
.kx-documents__kxa-abi-link___C6Pud { color: #0097A7 !important; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .kx-documents__kxa-abi-link___C6Pud:hover { text-decoration: underline; } }
.kx-documents__kxa-abi-step___3wZkf { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; color: #374151; font-size: 14.5px; line-height: 1.6; }
.kx-documents__kxa-abi-num___3YqNF { flex: none; width: 22px; height: 22px; border-radius: 999px; background: rgba(27,211,230,.12); color: #00838F; font: 700 12px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.kx-documents__kxa-abi-ic___37jRJ { display: inline-flex; align-items: center; color: #0097A7; }
.kx-documents__kxa-abi-ic___37jRJ .kx-documents__kx-ic___3rGbK { width: 16px; height: 16px; }
/* r19: doc-card AI verb chip — the shell's spark treatment in miniature */
.kx-documents__kxa-doc-aio___1j0r1 {
width: 22px; height: 22px; border-radius: 999px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(27,211,230,.2), rgba(0,188,212,.14) 50%, rgba(255,92,138,.18));
color: #00838F;
}
.kx-documents__kxa-doc-aio___1j0r1 svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* r19: highlights-drawer user stepper — one pill, teal chevrons (web-layer idiom) */
.kx-documents__kxa-doc-step___1awGW {
display: inline-flex; align-items: center; gap: 2px;
background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; padding: 3px 4px;
}
.kx-documents__kxa-doc-stepbtn___3qBhd {
width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
color: #0097A7; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; transition: background .15s;
-webkit-appearance: none; appearance: none;
}
@media (hover: hover) { .kx-documents__kxa-doc-stepbtn___3qBhd:hover { background: rgba(27,211,230,.14); } }
/* r19: ghost chip wrapper (drawer Share) */
.kx-documents__kxa-doc-ghost___28Cdk {
display: inline-flex; align-items: center;
background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; padding: 3px 12px;
cursor: pointer; transition: background .15s;
}
@media (hover: hover) { .kx-documents__kxa-doc-ghost___28Cdk:hover { background: #EDFAFC; } } /* opaque — see kxa-pro-ghost note */
/* r201 (founder QA 2026-09-12): summary highlights header = a mini-title ROW —
[eyebrow + count pill] … [by: 22px avatar + name/@handle] [Follow] [Share ○] —
on ONE line at 390 and 1440. The by-cluster is the only flexible item (min-width 0,
ellipsized name) so a long name or the stepper chevrons never push Share off the
card; the filters below are the segmented lane chips (scroll, not wrap). */
.kx-documents__kxa-doc-hh___jyw8z { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-documents__kxa-doc-hhlead___3lHLC { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.kx-documents__kxa-doc-hhlead___3lHLC .kx-documents__kx-eyebrow-app___28b7M { margin: 0; }
.kx-documents__kxa-doc-hhcnt___2mZK4 {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
background: rgba(27,211,230,.14); color: #00707E;
font: 700 11px/18px 'Inter Regular', Inter, -apple-system, sans-serif;
}
/* r223 (founder 2026-09-14): the identity is NOT right-aligned — like the overlay's Overview
drawer header it sits right after the eyebrow + count ("HIGHLIGHTS 1 · (K) Kontxt System"),
the stepper chevrons around the avatar, Follow beside it, and only the Share circle takes
the far right (margin-left:auto moved from .kxa-doc-hhby to .kxa-doc-hhshare). The by-cluster
keeps flex 0 1 auto + min-width 0 so the NAME truncates before the pill does (r218). */
.kx-documents__kxa-doc-hhby___-4oBL { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; }
.kx-documents__kxa-doc-hhby___-4oBL::before { content: '\B7'; color: #C5CAD1; font-weight: 700; margin: 0 4px 0 0; flex: none; }
.kx-documents__kxa-doc-hhby___-4oBL.kx-documents__kxa-doc-step___1awGW::before { display: none; }
.kx-documents__kxa-doc-hhshare___3Qt8S { margin-left: auto; }
.kx-documents__kxa-doc-hhby___-4oBL.kx-documents__kxa-doc-step___1awGW { padding: 2px 3px; }
.kx-documents__kxa-doc-hhuser___3YG2z { display: inline-flex; align-items: center; gap: 7px; min-width: 0; text-decoration: none; padding: 2px 4px; border-radius: 999px; }
@media (hover: hover) { .kx-documents__kxa-doc-hhuser___3YG2z:hover { background: #F4F4F5; } }
.kx-documents__kxa-doc-hhava___2xlg6 {
width: 22px; height: 22px; border-radius: 50%; flex: none; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
font: 700 10px 'Inter Regular', Inter, -apple-system, sans-serif;
background: #DDF6FA; color: #0097A7; border: 1.5px solid #1BD3E6; box-sizing: border-box;
}
.kx-documents__kxa-doc-hhava___2xlg6 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-documents__kxa-doc-hhname___2ZQaQ { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.kx-documents__kxa-doc-hhn___1p8mg { font-size: 12.5px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-documents__kxa-doc-hhh___1KH0o { font-size: 11px; font-weight: 600; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-documents__kxa-doc-stepbtn___3qBhd.kx-documents__sm___31mY- { width: 22px; height: 22px; }
.kx-documents__kxa-doc-hhfollow___3y3VL {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
border: 1px solid rgba(27,211,230,.55); border-radius: 999px; padding: 5px 12px 5px 10px; box-sizing: border-box;
background: #fff; color: #0097A7;
font: 700 12px 'Inter Regular', Inter, -apple-system, sans-serif; cursor: pointer;
-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
transition: background .15s, border-color .15s, color .15s;
}
/* r298: the quiet outline pair — "+ Follow" (white, cyan outline) / "✓ Following" (cyan wash) —
the r297 topic-chip idiom; the gradient CTA left this row so Visit site is the card's one */
.kx-documents__kxa-doc-hhplus___1wwGq { font-size: 15px; line-height: 1; font-weight: 600; margin-top: -1px; }
.kx-documents__kxa-doc-hhfollow___3y3VL .kx-documents__kx-ic___3rGbK { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .kx-documents__kxa-doc-hhfollow___3y3VL:hover { background: #EDFAFC; } }
.kx-documents__kxa-doc-hhfollow___3y3VL.kx-documents__on___231uN { background: rgba(27,211,230,.12); color: #00838F; border-color: rgba(27,211,230,.35); }
@media (hover: hover) { .kx-documents__kxa-doc-hhfollow___3y3VL.kx-documents__on___231uN:hover { background: #FFF1F5; color: #C0284E; border-color: rgba(255,92,138,.45); } }
/* phones: a labeled Follow + the eyebrow left ~30px for the highlighter's name
(measured at 390) — Follow becomes the person-add glyph in a 32px circle, the
twin of the Share circle, and the row tightens so the name reads whole */
@media (max-width: 640px) {
.kx-documents__kxa-doc-hh___jyw8z { gap: 5px; }
.kx-documents__kxa-doc-hhlead___3lHLC { gap: 5px; }
.kx-documents__kxa-doc-hhcnt___2mZK4 { min-width: 0; padding: 0 6px; }
.kx-documents__kxa-doc-hhuser___3YG2z { padding: 2px 0; gap: 6px; }
.kx-documents__kxa-doc-hhn___1p8mg { font-size: 12px; }
/* r218: keep the WORD on phones (a bare person-plus read as "invite"); compact pill,
the name column truncates with its ellipsis instead */
.kx-documents__kxa-doc-hhfollow___3y3VL { height: 30px; padding: 0 11px 0 9px; font-size: 12px; gap: 4px; }
.kx-documents__kxa-doc-hhfollow___3y3VL .kx-documents__kx-ic___3rGbK { width: 13px; height: 13px; }
}
/* r294 (founder, phone): the highlighter's name was crushed under Follow. Two lines:
eyebrow + count + Share, then avatar + full name + handle (+ steppers) with Follow at the
right. Share keeps its corner.
r300 (founder): the same crush happened in a NARROW CARD on a wide window (a 345px drawer —
the avatar sat under Follow) because the rule was keyed on the viewport. It is now keyed on
the header's own width (container query; the ≤640 media query stays as the fallback for
browsers without @container). */
.kx-documents__kxa-doc-hhwrap___2zvRO { container-type: inline-size; }
.kx-documents__kxa-doc-hhwrap___2zvRO > .kx-documents__kxa-doc-hh___jyw8z:last-child { padding-bottom: 12px; } /* r310: no filter row → the header still breathes above the seam */
@media (max-width: 640px) {
.kx-documents__kxa-doc-hh___jyw8z { flex-wrap: wrap; row-gap: 10px; }
.kx-documents__kxa-doc-hhlead___3lHLC { order: 0; flex: 1 1 calc(100% - 48px); }
.kx-documents__kxa-doc-hhshare___3Qt8S { order: 1; margin-left: auto; }
.kx-documents__kxa-doc-hhby___-4oBL { order: 2; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 110px); } /* r336 (founder): the stepper pill is ITS OWN unit sized to its content — r300's calc basis stretched it across the line with the chevrons at the edges */
.kx-documents__kxa-doc-hhby___-4oBL:not(.kx-documents__kxa-doc-step___1awGW) { flex-basis: 100%; max-width: 100%; } /* one highlighter: the by-line still opens line 2 */
.kx-documents__kxa-doc-hhfollow___3y3VL { order: 3; margin-left: auto; } /* Follow outside the pill, right-aligned on the same line */
.kx-documents__kxa-doc-hh--nofollow___mT6kF .kx-documents__kxa-doc-hhby___-4oBL.kx-documents__kxa-doc-step___1awGW { margin-left: auto; margin-right: auto; max-width: 100%; } /* no Follow: the pill centers */ /* r300: basis must force line 2 (a 0 basis slid it onto line 1) yet leave room for "✓ Following" (~95px + gap) — calc(100% - 96px) pushed that state onto a third line */
.kx-documents__kxa-doc-hhby___-4oBL::before { display: none; }
.kx-documents__kxa-doc-hhfollow___3y3VL { order: 3; }
.kx-documents__kxa-doc-hhn___1p8mg { font-size: 13px; }
.kx-documents__kxa-doc-hhh___1KH0o { font-size: 11.5px; }
}
@container (max-width: 540px) {
.kx-documents__kxa-doc-hh___jyw8z { flex-wrap: wrap; row-gap: 10px; gap: 5px; }
.kx-documents__kxa-doc-hhlead___3lHLC { order: 0; flex: 1 1 calc(100% - 48px); } /* line 1: eyebrow + count, Share (32px) at the end */
.kx-documents__kxa-doc-hhshare___3Qt8S { order: 1; margin-left: auto; }
.kx-documents__kxa-doc-hhby___-4oBL { order: 2; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 110px); } /* r336 (founder): the stepper pill is ITS OWN unit sized to its content — r300's calc basis stretched it across the line with the chevrons at the edges */
.kx-documents__kxa-doc-hhby___-4oBL:not(.kx-documents__kxa-doc-step___1awGW) { flex-basis: 100%; max-width: 100%; } /* one highlighter: the by-line still opens line 2 */
.kx-documents__kxa-doc-hhfollow___3y3VL { order: 3; margin-left: auto; } /* Follow outside the pill, right-aligned on the same line */
.kx-documents__kxa-doc-hh--nofollow___mT6kF .kx-documents__kxa-doc-hhby___-4oBL.kx-documents__kxa-doc-step___1awGW { margin-left: auto; margin-right: auto; max-width: 100%; } /* no Follow: the pill centers */ /* r300: basis must force line 2 (a 0 basis slid it onto line 1) yet leave room for "✓ Following" (~95px + gap) — calc(100% - 96px) pushed that state onto a third line */ /* line 2: the person, Follow (~80px) at the end */
.kx-documents__kxa-doc-hhby___-4oBL::before { display: none; }
.kx-documents__kxa-doc-hhuser___3YG2z { padding: 2px 0; gap: 6px; }
.kx-documents__kxa-doc-hhfollow___3y3VL { order: 3; }
.kx-documents__kxa-doc-hhn___1p8mg { font-size: 13px; }
.kx-documents__kxa-doc-hhh___1KH0o { font-size: 11.5px; }
}
.kx-documents__kxa-doc-hhshare___3Qt8S {
flex: none; width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box;
border: 1px solid #E5E7EB; background: #fff; display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
@media (hover: hover) { .kx-documents__kxa-doc-hhshare___3Qt8S:hover { background: #EDFAFC; border-color: rgba(27,211,230,.45); } }
/* r290/r294 chips → r298 TABS (founder: the header read cramped — five bordered shapes in three
rows). The filters are quiet underline tabs on the header's bottom edge, above the hairline
seam with the entries card: word + a small muted count, the active one deep cyan with a 2px
accent underline. One line at 390 (scrolls sideways past that, never wraps the card). */
.kx-documents__kxa-doc-hhtabs___22EQS {
display: flex; align-items: stretch; gap: 20px; margin: 10px -16px 0; padding: 0 16px;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kx-documents__kxa-doc-hhtabs___22EQS::-webkit-scrollbar { display: none; }
.kx-documents__kxa-doc-hhtab___nIm_0 {
flex: none; display: inline-flex; align-items: center; gap: 5px; border: none; background: none;
padding: 10px 1px 9px; margin: 0; cursor: pointer; white-space: nowrap;
font: 600 12.5px 'Inter Regular', Inter, -apple-system, sans-serif; color: #6B7280;
box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s;
-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.kx-documents__kxa-doc-hhtab___nIm_0:focus { outline: none; }
.kx-documents__kxa-doc-hhtab___nIm_0:focus-visible { box-shadow: inset 0 -2px 0 rgba(27,211,230,.5); }
@media (hover: hover) { .kx-documents__kxa-doc-hhtab___nIm_0:hover { color: #374151; } }
.kx-documents__kxa-doc-hhtab___nIm_0.kx-documents__on___231uN { color: #00838F; font-weight: 700; box-shadow: inset 0 -2px 0 #1BD3E6; }
.kx-documents__kxa-doc-hhtabn___34gFe { font-size: 11px; font-weight: 700; color: #9CA3AF; }
.kx-documents__kxa-doc-hhtab___nIm_0.kx-documents__on___231uN .kx-documents__kxa-doc-hhtabn___34gFe { color: #00838F; }
@media (max-width: 640px) {
.kx-documents__kxa-doc-hhtabs___22EQS { gap: 18px; margin-top: 8px; }
.kx-documents__kxa-doc-hhtab___nIm_0 { font-size: 12.5px; }
}
/* r24: favicon overlap chip on the card media (the mock's site-identity mark) */
.kx-documents__kxa-doc-favov___xfAtH {
position: absolute; left: 14px; bottom: -14px; z-index: 2;
width: 36px; height: 36px; border-radius: 10px; background: #fff;
border: 1px solid #E5E7EB; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(2,20,26,.12);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* r40: no-image media treatment — quiet inset band with site identity
(large-ish favicon or a domain letter tile), replacing the broken-looking
grey landscape glyph */
.kx-documents__kxa-doc-noimg___JnMCp {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; background: #F9FAFB;
}
.kx-documents__kxa-doc-notile___1lYBo {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: linear-gradient(135deg, rgba(27,211,230,.18), rgba(0,188,212,.10) 55%, rgba(255,92,138,.14));
color: #0097A7; font: 800 20px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* r46: the no-image band is the group-card night gradient (deliberate, unblurrable) */
.kx-documents__kxa-doc-noimg--grad___2r0Em {
display: block; width: 100% !important; height: 220px !important;
background: linear-gradient(120deg, #04121A, #0B3A44 70%, #12525E);
}
/* r51: promotion chip pair (card header + list rows) */
.kx-documents__kxa-doc-promo___3oI1h { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.kx-documents__kxa-doc-promo___3oI1h .kx-documents__pv___3tNfW {
display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 3px 7px;
font: 700 12.5px 'Inter Regular', Inter, -apple-system, sans-serif; color: #6B7280;
}
@media (hover: hover) { .kx-documents__kxa-doc-promo___3oI1h .kx-documents__pv___3tNfW:hover { background: rgba(27,211,230,.12); color: #00838F; } }
.kx-documents__kxa-doc-promo___3oI1h .kx-documents__pv___3tNfW .kx-documents__kx-ic___3rGbK { width: 13px; height: 13px; }
/* r51: promoted capsule — kx card language (Promotion.jsx + the Kontxt fallback) */
.kx-documents__kxa-promo-card___vjtsJ {
display: flex; align-items: center; gap: 11px; text-decoration: none;
background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 8px 14px 8px 8px;
font-family: 'Inter Regular', Inter, -apple-system, sans-serif; max-width: 460px;
transition: background .15s, border-color .15s;
}
@media (hover: hover) { .kx-documents__kxa-promo-card___vjtsJ:hover { background: #F9FAFB; border-color: rgba(27,211,230,.45); } }
/* founder QA 2026-09-01: as a flex item the card's min-width:auto (nowrap )
overflowed the centered column on phones and clipped the PROMOTED label to
"ROMOTED" — let it shrink and ellipsize instead */
.kx-documents__kxa-promo-card___vjtsJ { min-width: 0; max-width: min(460px, 100%); }
.kx-documents__kxa-promo-card___vjtsJ > div { min-width: 0; }
.kx-documents__kxa-promo-card___vjtsJ img, .kx-documents__kxa-promo-card___vjtsJ .kx-documents__tile___Qyglc { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; display: block; }
.kx-documents__kxa-promo-card___vjtsJ b { font-size: 14.5px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.kx-documents__kxa-promo-card___vjtsJ .kx-documents__u___3kCgx { font-size: 12px; color: #9CA3AF; display: block; margin-top: 1px; }
.kx-documents__kxa-promo-card___vjtsJ.kx-documents__on-image___CARTh { background: rgba(4,18,26,.55); border-color: rgba(255,255,255,.25); }
.kx-documents__kxa-promo-card___vjtsJ.kx-documents__on-image___CARTh b { color: #fff; }
.kx-documents__kxa-promo-card___vjtsJ.kx-documents__on-image___CARTh .kx-documents__u___3kCgx { color: rgba(255,255,255,.75); }
/* r57 (founder, three-surfaces): Explore MOSAIC — hero card spans two columns,
taller media, engagement badge; degrades to normal flow ≤900px */
.kx-documents__kxa-mosaic___1JpWx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; align-items: start; padding: 0 10px; }
.kx-documents__kxa-mosaic-cell___2Pzen { position: relative; min-width: 0; }
.kx-documents__kxa-mosaic-cell___2Pzen > div { width: 100% !important; } /* FlowDocCard root carries an inline columnWidth */
.kx-documents__kxa-mosaic-cell___2Pzen .kx-documents__kx-card-hover___1dgxz { width: auto !important; } /* the Card's inline tile_width */
.kx-documents__kxa-mosaic-hero___35zyC { grid-column: span 2; }
/* the media WRAPPER carries the fixed band height — grow it with the img, or
the taller media bleeds over the title (probe finding) */
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M,
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M img, .kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-noimg--grad___2r0Em { height: 300px !important; }
/* founder QA 2026-09-02: DefaultImage's reserved-footprint span keeps its
inline 220px height — a 300px grad inside a 220px centering parent spilled
40px UPWARD over the header avatar (overflow:visible). Stretch the whole
wrapper chain with the media. */
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH),
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH) div { height: 300px !important; }
/* the card chain shrink-wraps through the inline — block it + stretch the
Card so the hero actually FILLS its span-2 cell */
.kx-documents__kxa-mosaic-cell___2Pzen a.kx-documents__document-link___RKNJC { display: block; }
/* DefaultImage's reserved-footprint box carries an inline tile width — stretch
it to the cell (the favicon chip is a sibling span, untouched) */
.kx-documents__kxa-mosaic-cell___2Pzen .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH), .kx-documents__kxa-mosaic-cell___2Pzen .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH) div { width: 100% !important; } /* the reserved box nests inside centering wrappers */
.kx-documents__kxa-mosaic-cell___2Pzen .kx-documents__kx-card-hover___1dgxz { margin: 15px 10px !important; align-self: stretch; } /* the flow wrapper is a centering flex column — stretch beats shrink-wrap */
.kx-documents__kxa-mosaic-badge___V1rmR {
position: absolute; z-index: 2; top: 3px; left: 22px; /* straddles the card's top edge (margin gap) — over the header it hid the access pill */
font: 700 11px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #EAF6F8; background: rgba(4,18,26,.72); border: 1px solid rgba(27,211,230,.45);
border-radius: 99px; padding: 3px 9px;
}
@media (max-width: 900px){
.kx-documents__kxa-mosaic___1JpWx { display: block; }
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M img, .kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-noimg--grad___2r0Em { height: 220px !important; }
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH),
.kx-documents__kxa-mosaic-hero___35zyC .kx-documents__kxa-doc-media___3t10M > span:not(.kx-documents__kxa-doc-favov___xfAtH) div { height: 220px !important; }
}
/* r57: the library's timeline SPINE (documents dashboard list view) — cyan rail
+ bucket captions as nodes; rail renders even when captions are suppressed */
/* r58 RELIABILITY: the node dots were ::before at left:-15px on captions INSIDE
the overflow-x:auto rows container — outside its clip box, so paint was
CLIPPED (computed styles lied; the rail drew but circles vanished). The 26px
gutter now lives on the scroll container itself, so dots land inside the
clip box; the rail stays on the wrap (outside the clipper — never clipped). */
.kx-documents__kxa-spine-wrap___3Qd9I { position: relative; }
.kx-documents__kxa-spine-wrap___3Qd9I > div { padding-left: 26px; }
.kx-documents__kxa-spine-wrap___3Qd9I::before {
content: ''; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px;
border-radius: 2px; background: linear-gradient(#1BD3E6, rgba(27,211,230,.05));
}
.kx-documents__kxa-spine-wrap___3Qd9I .kx-documents__kxa-doc-bucket___3bVX9 { position: relative; }
.kx-documents__kxa-spine-wrap___3Qd9I .kx-documents__kxa-doc-bucket___3bVX9::before {
content: ''; position: absolute; left: -15px; top: 1px; width: 9px; height: 9px;
border-radius: 50%; background: #fff; border: 2px solid #1BD3E6; box-sizing: border-box;
}
/* r258: Background dialog — uploaded-background tiles in the kx dialect. Fixed 16:10 tile on the
night ground (a missing file shows the ground, never alt text), marker RING for the selection
(the old 5px border resized the image), actions in normal flow under the selected tile. */
.kx-documents__kxa-bg-grid___2eSO_ { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 18px; font-family: 'Inter Regular', Inter, -apple-system, sans-serif; }
.kx-documents__kxa-bg-cell___7_gzf { width: 200px; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.kx-documents__kxa-bg-tile___3nUoE {
position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; cursor: pointer;
background: linear-gradient(120deg, #04121A, #0B3A44 70%, #12525E);
border: 1px solid #E5E7EB; box-sizing: border-box; transition: box-shadow .15s, border-color .15s;
}
.kx-documents__kxa-bg-tile___3nUoE:focus { outline: none; }
.kx-documents__kxa-bg-tile___3nUoE:focus-visible { box-shadow: 0 0 0 2px #1BD3E6; }
@media (hover: hover) { .kx-documents__kxa-bg-tile___3nUoE:hover { border-color: rgba(27,211,230,.55); } }
.kx-documents__kxa-bg-tile___3nUoE.kx-documents__on___231uN { border-color: #1BD3E6; box-shadow: 0 0 0 3px rgba(27,211,230,.35), 0 8px 20px rgba(2,20,26,.12); }
.kx-documents__kxa-bg-img___2CRZR { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-documents__kxa-bg-badge___CYIqw {
position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px;
background: rgba(255,255,255,.94); color: #00707E; border-radius: 99px; padding: 3px 9px;
font: 700 11px 'Inter Regular', Inter, -apple-system, sans-serif;
}
.kx-documents__kxa-bg-del___HNe95 {
position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.94); color: #6B7280;
-webkit-appearance: none; appearance: none; padding: 0;
}
@media (hover: hover) { .kx-documents__kxa-bg-del___HNe95:hover { background: #FFF1F5; color: #D81B60; } }
.kx-documents__kxa-bg-actions___xhvrb { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.kx-documents__kxa-bg-check___2ChRc {
display: inline-flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; padding: 2px 4px;
color: #374151; font: 600 12.5px 'Inter Regular', Inter, -apple-system, sans-serif; -webkit-appearance: none; appearance: none;
}
.kx-documents__kxa-bg-check___2ChRc[aria-checked="true"] { color: #00707E; }
.kx-documents__kxa-bg-badge___CYIqw .kx-documents__kx-ic___3rGbK, .kx-documents__kxa-bg-del___HNe95 .kx-documents__kx-ic___3rGbK, .kx-documents__kxa-bg-check___2ChRc .kx-documents__kx-ic___3rGbK { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kx-documents__kxa-bg-check___2ChRc .kx-documents__kx-ic___3rGbK { width: 16px; height: 16px; }
/* r320: the summary page's hero CTA row — "Add Kontxt first" ghost + primary "Visit site", right-aligned
like the pills beneath it (was one translucent grey pill with two inline links) */
.kx-documents__kxa-doc-hcta2___N4GKl { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.kx-documents__kxa-doc-hcta2___N4GKl .kx-documents__kxa-com-cta___sqJUk { font-size: 14px; padding: 9px 16px; text-decoration: none; }
.kx-documents__kxa-doc-hcta2___N4GKl .kx-documents__kxa-doc-ghost___28Cdk { font-size: 13.5px; }
/* r347 — the Info card's description editor (DocumentIconMenu): kx input look, grows a little, saves in place */
.kx-documents__kontxt-css-override___1S2ou .kx-documents__kx-info-ta___26zNX, #kx-documents__root___i3xGR .kx-documents__kx-info-ta___26zNX {
width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF;
font: 13.5px/1.45 'Inter Regular', Inter, system-ui, sans-serif; color: #111827; outline: none;
}
.kx-documents__kontxt-css-override___1S2ou .kx-documents__kx-info-ta___26zNX:focus, #kx-documents__root___i3xGR .kx-documents__kx-info-ta___26zNX:focus { border-color: #0097A7; box-shadow: 0 0 0 3px rgba(0,151,167,.15); }
.kx-documents__kontxt-css-override___1S2ou .kx-documents__kx-info-ta___26zNX::placeholder, #kx-documents__root___i3xGR .kx-documents__kx-info-ta___26zNX::placeholder { color: #9CA3AF; }
.kx-documents__kontxt-css-override___1S2ou .kx-documents__kx-info-save___2oB7Q:disabled, #kx-documents__root___i3xGR .kx-documents__kx-info-save___2oB7Q:disabled { opacity: .45; cursor: default; }
/* imported from editorStyles.css */
/*@import '~draft-js-mention-plugin/lib/plugin.css';*/
/*:global {*/
/*@import 'draft-js-mention-plugin/lib/plugin.css';*/
/*}*/
.editorStyles__editor___2B2m_ {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
/*margin-bottom: 2em;*/
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: #fefefe;
}
.editorStyles__read-only-normal-display___2B3bF {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
/*margin-bottom: 2em;*/
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: rgb(235,235,228) /*rgba(0, 0, 0, 0.3)*/;
}
.editorStyles__editor___2B2m_ .public-DraftEditor-content {
min-height: 14px; /*140px*/
}
/* imported from InfiniteLoader.example.css */
/*.ReactVirtualized__Grid__innerScrollContainer {*/
/*background-color: #F5F5F5; !*grey100*!*/
/*}*/
.InfiniteLoader-example__List___12Riq {
width: 100%;
/*border: 0px solid #DDD;*/
border: 0;
outline: 0; /*TODO: might be needed for accessibility. can also use color with zero opacity*/
/*overflow: hidden !important;*/
overflow: visible !important; /*previously was hidden, but changed to visible to show emoji select in nested comment component*/
}
.InfiniteLoader-example__row___1CP9P {
margin-bottom: 5px;
}
.InfiniteLoader-example__placeholder___369Sz {
display: inline-block;
height: 1em;
background-color: #DDD;
}
.InfiniteLoader-example__cacheButtonAndCountRow___3t504 {
display: flex;
align-items: center;
}
.InfiniteLoader-example__button___29BNt {
flex: 0 0 auto;
background-color: #4db6ac;
color: #fff;
appearance: none;
border: none;
padding: .5em 1em;
border-radius: .35em;
font-size: 1em;
}
.InfiniteLoader-example__cacheCountRow___1bNVv {
flex: 1 1 auto;
text-align: right;
color: #bdbdbd;
font-size: .75em;
font-weight: 100;
}
/* imported from kx-post.css */
/* ── kx social core (cohesion S4 · social.html) ─────────────────────────────
App-bundle-only stylesheet (imported by Post.jsx); bare-but-prefixed
classes (kxa-soc-*) per the parallel-agent ownership rules. Tokens mirror
client/theme.js KX_APP / DESIGN_SYSTEM.md. */
/* ── post card ── */
.kx-post__kxa-soc-card___2ZzUH {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 16px;
box-shadow: 0 1px 2px rgba(2,20,26,.05), 0 6px 18px rgba(2,20,26,.06);
margin-bottom: 14px;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
word-break: break-word;
}
.kx-post__kxa-soc-prow___3LwdQ { display: flex; align-items: flex-start; gap: 10px; }
.kx-post__kxa-soc-who___2RUpq { min-width: 0; flex: 1; }
.kx-post__kxa-soc-who___2RUpq b { font-size: 13.5px; color: #111827; }
.kx-post__kxa-soc-who___2RUpq .kx-post__kxa-soc-h___3owNV { color: #9CA3AF; font-size: 12px; margin-left: 5px; font-weight: 400; }
.kx-post__kxa-soc-who___2RUpq .kx-post__kxa-soc-t___2HNEf {
color: #9CA3AF; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; margin-left: 7px;
}
.kx-post__kxa-soc-actionhdr___1qFXw { font-weight: 400; color: #6B7280; font-size: 12.5px; }
/* tinted initial avatar (used when the member has no picture) */
.kx-post__kxa-soc-ava___1BI1V {
width: 30px; height: 30px; border-radius: 50%; background: #DDF6FA; color: #0097A7;
font: 700 12px 'Inter Regular', Inter, -apple-system, sans-serif;
display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
}
.kx-post__kxa-soc-ava___1BI1V img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.kx-post__kxa-soc-ava___1BI1V.kx-post__p2___1YUSq { background: #FDE7EF; color: #D81B60; }
.kx-post__kxa-soc-ava___1BI1V.kx-post__p3___1c1ri { background: #EDE9FE; color: #6D28D9; }
.kx-post__kxa-soc-ava___1BI1V.kx-post__sm___3lmih { width: 26px; height: 26px; font-size: 10.5px; }
/* kebab */
@media (hover: hover) { .kx-post__kxa-soc-kebab___3iChn button:hover { background: rgba(27,211,230,.12) !important; border-radius: 50% !important; } }
/* body */
.kx-post__kxa-soc-body___V7Otj { font-size: 13.5px; color: #111827; margin: 8px 0 4px; line-height: 1.55; }
.kx-post__kxa-soc-body___V7Otj [class*="draftJsMentionPlugin__mention"] {
color: #0097A7 !important; background: rgba(27,211,230,.12); border-radius: 6px;
padding: 0 4px; font-weight: 700; text-decoration: none;
}
/* attached doc/folder → compact link preview row */
.kx-post__kxa-soc-linkprev___2VTta {
display: flex; gap: 10px; align-items: center; border: 1px solid #E5E7EB;
border-radius: 12px; padding: 10px 12px; margin: 10px 0 4px; background: #F9FAFB;
text-decoration: none; color: inherit; cursor: default;
}
a.kx-post__kxa-soc-linkprev___2VTta { cursor: pointer; }
@media (hover: hover) { a.kx-post__kxa-soc-linkprev___2VTta:hover { border-color: rgba(27,211,230,.5); background: #F4FBFD; } }
.kx-post__kxa-soc-linkprev___2VTta .kx-post__kxa-soc-thumb___2Dkvk {
width: 38px; height: 38px; border-radius: 9px; background: rgba(27,211,230,.12);
display: flex; align-items: center; justify-content: center; color: #0097A7; flex: none; overflow: hidden;
}
.kx-post__kxa-soc-linkprev___2VTta .kx-post__kxa-soc-thumb___2Dkvk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-post__kxa-soc-linkprev___2VTta b { font-size: 12.5px; display: block; line-height: 1.35; color: #111827; }
.kx-post__kxa-soc-linkprev___2VTta span { font-size: 11px; color: #9CA3AF; }
/* actions row: count chips + stroke share */
.kx-post__kxa-soc-actions___1z78z {
display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
border-top: 1px solid #F0F1F3;
}
.kx-post__kxa-soc-achip___3F0tm {
display: inline-flex; align-items: center; gap: 5px; border: none; background: #F4F4F5;
color: #374151; border-radius: 999px; padding: 4px 11px;
font: 600 11.5px 'Inter Regular', Inter, -apple-system, sans-serif; cursor: pointer;
}
/* r217: hover tint only on devices that hover — iOS keeps :hover after a tap, so a
closed comments chip / un-liked thumb stayed tinted as if selected */
@media (hover: hover) { .kx-post__kxa-soc-achip___3F0tm:hover { background: rgba(27,211,230,.12); color: #00838F; } }
.kx-post__kxa-soc-achip___3F0tm.kx-post__on___22H_A { background: rgba(27,211,230,.12); color: #00838F; }
.kx-post__kxa-soc-achip___3F0tm .kx-post__kx-ic___--XNH { width: 14px; height: 14px; }
.kx-post__kxa-soc-achip___3F0tm:disabled { cursor: default; opacity: .7; }
/* the stroke share action (SendBox is_kx_guest renders .kx-ovact) sits right */
.kx-post__kxa-soc-actions___1z78z .kx-post__kx-ovact___4WmyV { margin-left: auto; flex-direction: row; gap: 5px; padding: 4px 12px; }
.kx-post__kxa-soc-actions___1z78z .kx-post__kx-ovact___4WmyV span { font-size: 11.5px; }
/* comment strip under the card (thread + kx composer live here) */
.kx-post__kxa-soc-cstrip___2BVrh { margin-top: 2px; }
/* ── composer card (PostBox) ── */
.kx-post__kxa-soc-composer___1gJP2 {
display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #E5E7EB;
border-radius: 16px; padding: 14px;
box-shadow: 0 1px 2px rgba(2,20,26,.05), 0 6px 18px rgba(2,20,26,.06); margin-bottom: 16px;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-soc-attach___1aFin {
display: inline-flex; align-items: center; gap: 8px; background: rgba(27,211,230,.12);
border: 1px solid rgba(27,211,230,.35); border-radius: 9px; padding: 5px 10px;
font: 600 12px 'Inter Regular', Inter, -apple-system, sans-serif; color: #00838F; margin-top: 8px;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── segmented tab pill (Feed/Explore) ── */
.kx-post__kxa-soc-segcnt___3arFD {
font: 700 10.5px 'Inter Regular', Inter, -apple-system, sans-serif;
background: #F4F4F5; color: #374151; border-radius: 999px; padding: 1px 7px; margin-left: 7px;
}
.kx-post__kxa-soc-seg-on___TbE20 .kx-post__kxa-soc-segcnt___3arFD { background: rgba(27,211,230,.18); color: #00838F; }
/* ── empty state ── */
.kx-post__kxa-soc-empty___3i3gh {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 34px 0 26px; text-align: center;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-soc-empty___3i3gh .kx-post__kxa-soc-tile___2ITlQ {
width: 52px; height: 52px; border-radius: 14px; background: rgba(27,211,230,.12);
border: 1px solid rgba(27,211,230,.3); display: flex; align-items: center; justify-content: center; color: #0097A7;
}
.kx-post__kxa-soc-empty___3i3gh b { font-size: 14px; color: #111827; }
.kx-post__kxa-soc-empty___3i3gh span { font-size: 12.5px; color: #66707E; max-width: 300px; }
.kx-post__kxa-soc-cta___1BJfL {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid rgba(0,131,143,.35); background: linear-gradient(180deg,#24D3E6,#00B5CC);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px rgba(0,181,204,.35);
color: #fff; font: 700 12px 'Inter Regular', Inter, -apple-system, sans-serif;
border-radius: 999px; padding: 7px 16px; cursor: pointer; text-decoration: none; margin-top: 4px;
text-shadow: 0 1px 1px rgba(0,90,100,.25);
}
/* ── post detail (IsolatedPost) ── */
.kx-post__kxa-soc-pdhead___34-EN { display: flex; align-items: flex-start; width: 100%; margin-bottom: 8px; }
/* round 19 — privacy glyph + kx popcard menus (popcards render in MUI portals
with kontxt-css-override; these rules stay UNSCOPED and self-size .kx-ic) */
.kx-post__kxa-soc-priv___YtXta {
display: inline-flex; align-items: center; gap: 2px; color: #9CA3AF;
background: transparent; border: none; padding: 2px 3px; border-radius: 8px;
}
.kx-post__kxa-soc-priv___YtXta .kx-post__kx-ic___--XNH { width: 15px; height: 15px; }
.kx-post__kxa-soc-privbtn___3UVac { cursor: pointer; }
@media (hover: hover) { .kx-post__kxa-soc-privbtn___3UVac:hover { background: rgba(27,211,230,.12); color: #0097A7; } }
.kx-post__kxa-soc-pmenu___y-yJ4 {
padding: 6px;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-soc-pmrow___2uize {
display: flex; align-items: center; gap: 9px; min-width: 150px;
padding: 8px 11px; border-radius: 9px; cursor: pointer;
font-size: 14px; font-weight: 600; color: #111827;
}
.kx-post__kxa-soc-pmrow___2uize .kx-post__kx-ic___--XNH { width: 15px; height: 15px; flex: none; color: #6B7280; }
@media (hover: hover) { .kx-post__kxa-soc-pmrow___2uize:hover { background: rgba(27,211,230,.12); } }
.kx-post__kxa-soc-pmrow___2uize.kx-post__off___1av59 { color: #D81B60; }
.kx-post__kxa-soc-pmrow___2uize.kx-post__off___1av59 .kx-post__kx-ic___--XNH { color: #D81B60; }
@media (hover: hover) { .kx-post__kxa-soc-pmrow___2uize.kx-post__off___1av59:hover { background: #FDF0F5; } }
/* the post card's Share (SendBox .kx-ovact) → kx ghost chip */
.kx-post__kxa-soc-actions___1z78z .kx-post__kx-ovact___4WmyV {
display: inline-flex; align-items: center; background: #fff;
border: 1px solid #E5E7EB; border-radius: 999px; color: #6B7280;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .kx-post__kxa-soc-actions___1z78z .kx-post__kx-ovact___4WmyV:hover { background: rgba(27,211,230,.12); border-color: #BFEDF4; color: #0097A7; } }
.kx-post__kxa-soc-actions___1z78z .kx-post__kx-ovact___4WmyV .kx-post__kx-ic___--XNH { width: 14px; height: 14px; }
/* ============ lanes v1 (feed, desktop) ============ */
/* One lane per source — bounded inset panel + eyebrow tick (mock r21: without
the wrapper, lanes read like the Documents grid). Unscoped like the other
kxa-* rules; the lane row itself is in-page (no portal). */
/* r26: the lane is a one-column grid with minmax(0,1fr) — flex:none cards give
the row a huge min-content width, and through plain-block ancestors that
propagated into the app's 1fr grid column (min-width:auto), widening the PAGE
instead of letting the row scroll (the mixed lane was just the widest victim).
minmax(0,1fr) zeroes the track's min-content contribution and restores real
overflow-x scrolling for every lane. */
.kx-post__kxa-lane___3sDOM { display: grid; grid-template-columns: minmax(0, 1fr); background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 16px; padding: 11px 13px 13px; margin: 0 0 14px; }
.kx-post__kxa-lane-hd___1DSl3 { display: flex; align-items: center; gap: 9px; margin: 0 2px 4px; font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.kx-post__kxa-lane-hd___1DSl3::before { content: ""; width: 11px; height: 5.5px; background: #1BD3E6; transform: skewX(-18deg); border-radius: 1px; box-shadow: 0 0 8px rgba(27,211,230,.5); flex: none; }
.kx-post__kxa-lane-hd___1DSl3 > b { font-size: 13.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-post__kxa-lane-hd___1DSl3 .kx-post__kxa-com-ava___1DhrH svg { width: 16px; height: 16px; stroke: #0097A7; fill: none; stroke-width: 1.7; }
.kx-post__kxa-lane-h___1a_tX { color: #9CA3AF; font-size: 11.5px; }
.kx-post__kxa-lane-t___1VEoh { color: #9CA3AF; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; }
.kx-post__kxa-lane-viewall___29Zai { margin-left: auto; color: #0097A7; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .kx-post__kxa-lane-viewall___29Zai:hover { text-decoration: underline; } }
.kx-post__kxa-lane-track___1t6Pj { position: relative; }
.kx-post__kxa-lane-row___1Fgu_ { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; border-radius: 12px; padding: 2px 40px 6px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.kx-post__kxa-lane-card___1kfZR { flex: none; scroll-snap-align: start; }
.kx-post__kxa-lane-card___1kfZR .kx-post__kx-card-hover___1l4kJ { width: 330px !important; margin: 4px 0 !important; }
.kx-post__kxa-lane-card--post___2kSQY { width: 330px; }
.kx-post__kxa-lane-card--post___2kSQY .kx-post__kxa-soc-card___2ZzUH { width: 330px; max-width: 330px; box-sizing: border-box; margin: 4px 0; }
.kx-post__kxa-lane-tail___2H5Pn { flex: none; scroll-snap-align: start; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 120px; min-height: 180px; margin: 4px 0; border: 1px dashed #D4D4D8; border-radius: 16px; background: #fff; color: #0097A7; font: 700 13px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; text-decoration: none; }
.kx-post__kxa-lane-tail___2H5Pn svg { width: 16px; height: 16px; stroke: #0097A7; fill: none; stroke-width: 1.7; }
@media (hover: hover) { .kx-post__kxa-lane-tail___2H5Pn:hover { background: #EDFAFC; border-color: #BFEDF4; } }
.kx-post__kxa-lane-fade___3ZuIK { position: absolute; top: 0; bottom: 6px; right: 0; width: 56px; background: linear-gradient(90deg, rgba(249,250,251,0), #F9FAFB 85%); pointer-events: none; border-radius: 0 12px 12px 0; }
.kx-post__kxa-lane-pad___3xPps { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 999px; border: 1px solid #E5E7EB; background: #fff; box-shadow: 0 2px 4px rgba(2,20,26,.08), 0 10px 24px rgba(2,20,26,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; padding: 0; }
.kx-post__kxa-lane-pad___3xPps svg { width: 15px; height: 15px; stroke: #0097A7; fill: none; stroke-width: 1.9; }
.kx-post__kxa-lane-pad___3xPps.kx-post__l___2u-d3 { left: -8px; }
.kx-post__kxa-lane-pad___3xPps.kx-post__l___2u-d3 svg { transform: rotate(180deg); }
.kx-post__kxa-lane-pad___3xPps.kx-post__r___1pbcB { right: -8px; }
@media (hover: hover) { .kx-post__kxa-lane___3sDOM:hover .kx-post__kxa-lane-pad___3xPps { opacity: 1; } }
@media (hover: hover) { .kx-post__kxa-lane-pad___3xPps:hover { background: #EDFAFC; } }
/* r46: chip row scrolls horizontally instead of overflowing the page on
mobile (same recipe as .kxa-lane-row); chips must not shrink or wrap */
.kx-post__kxa-lane-chips___3J0_K { display: flex; gap: 8px; margin: 4px 0 12px;
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding: 2px 0; }
.kx-post__kxa-lane-chips___3J0_K::-webkit-scrollbar { display: none; }
.kx-post__kxa-lane-chip___2SLO5, .kx-post__kxa-lane-chipdot___AM85T { flex: none; white-space: nowrap; }
.kx-post__kxa-lane-chip___2SLO5 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E5E7EB; background: #fff; color: #6B7280; font: 600 13.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.kx-post__kxa-lane-chip___2SLO5 .kx-post__kx-ic___--XNH { width: 15px; height: 15px; flex: none; } /* r45b: funnel/tag glyphs breathe from the label */
@media (hover: hover) { .kx-post__kxa-lane-chip___2SLO5:hover { color: #374151; } }
.kx-post__kxa-lane-chip___2SLO5.kx-post__on___22H_A { background: rgba(27,211,230,.12); border-color: rgba(27,211,230,.35); color: #00838F; font-weight: 700; }
/* r26: post lists breathe — cards were flush with the column edge on profile/groups */
#kx-post__post_box___3DJHK { padding: 0 6px; box-sizing: border-box; }
/* phase-1 tag lanes: the tag pill IS the lane identity (vs the ringed avatar) */
.kx-post__kxa-lane-hd___1DSl3 .kx-post__kxa-lane-tagpill___2U-ar { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.kx-post__kxa-lane-hd___1DSl3 .kx-post__kxa-lane-tagpill___2U-ar .kx-post__kx-ic___--XNH { width: 14px; height: 14px; }
/* r39: followed topics + trending + segmented-chip counts */
.kx-post__kxa-lane-chipcnt___1L2Xd {
display: inline-flex; align-items: center; justify-content: center;
margin-left: 7px; min-width: 20px; height: 18px; padding: 0 6px;
border-radius: 999px; background: #F0F1F3; color: #374151;
font-size: 11.5px; font-weight: 700;
}
.kx-post__kxa-lane-chip___2SLO5.kx-post__on___22H_A .kx-post__kxa-lane-chipcnt___1L2Xd { background: rgba(27,211,230,.25); color: #00707E; }
.kx-post__kxa-lane-chips--seg___1NQN0 { justify-content: flex-start; } /* r41: unified top-left placement (was centered legacy) */
.kx-post__kxa-lane-followchip___xr2WP {
display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
background: #fff; border: 1px solid #E5E7EB; border-radius: 999px;
padding: 3px 10px; cursor: pointer;
font: 700 11.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #6B7280; transition: background .15s ease, border-color .15s ease;
}
@media (hover: hover) { .kx-post__kxa-lane-followchip___xr2WP:hover { background: #EDFAFC; border-color: #BFEDF4; } } /* opaque per r20 law */
.kx-post__kxa-lane-followchip___xr2WP.kx-post__on___22H_A { background: rgba(27,211,230,.12); border-color: #BFEDF4; color: #00838F; }
.kx-post__kxa-lane-xdoc___2Cpm- {
display: flex; flex-direction: column; justify-content: center; gap: 8px;
padding: 16px; text-decoration: none; background: #fff;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-lane-xdoc___2Cpm- > span { display: flex; flex-direction: column; gap: 8px; }
.kx-post__kxa-lane-xdoc___2Cpm- b {
color: #111827; font-size: 15px; font-weight: 700; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kx-post__kxa-lane-xdom___1CmzI { color: #9CA3AF; font-size: 12px; }
.kx-post__kxa-lane-xdoc___2Cpm- .kx-post__kxa-com-privb___JYnt3 { align-self: flex-start; }
.kx-post__kxa-exp-trend___3qNyh {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
/* r41b (founder): type chips stay top-left; the topics strip sits CENTERED
beneath them, with real breathing room below */
width: min(100%, 860px); margin: 6px auto 18px; justify-content: center;
font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-exp-trend-cap___1y6Rv {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: #0097A7;
}
.kx-post__kxa-exp-trend-pill___29PAo { display: inline-flex; align-items: center; gap: 6px; }
.kx-post__kxa-exp-trend-pill___29PAo .kx-post__kx-tpill___31wBg { cursor: pointer; }
.kx-post__kxa-exp-trend-pill___29PAo.kx-post__on___22H_A .kx-post__kx-tpill___31wBg { outline: 2px solid rgba(27,211,230,.45); }
.kx-post__kxa-exp-trend-n___1KFe0 { color: #9CA3AF; font-size: 12px; }
/* r40: trending-strip hint + empty-state strip fit */
.kx-post__kxa-exp-trend-hint___21Nbj { color: #9CA3AF; font-size: 11.5px; margin-left: 4px; }
/* r297: the feed's "Your topics" strip — same pill anatomy; the trailing link to Discover */
.kx-post__kxa-your-topics___2_rfg { margin-bottom: 4px; }
.kx-post__kxa-exp-trend-more___sHbyt { font: 700 12px 'Inter Regular', Inter, -apple-system, sans-serif; color: #0097A7; text-decoration: none; margin-left: 4px; white-space: nowrap; }
@media (hover: hover) { .kx-post__kxa-exp-trend-more___sHbyt:hover { color: #00838F; text-decoration: underline; } }
.kx-post__kxa-soc-empty___3i3gh .kx-post__kxa-exp-trend___3qNyh { justify-content: center; margin: 12px 0 4px; }
/* r43: collapsed-Filter extras — species chips (dashed quiet group), the
group divider dot, and the clearing X on the trigger */
.kx-post__kxa-lane-chip___2SLO5.kx-post__species___184ge { border-style: dashed; color: #9CA3AF; }
.kx-post__kxa-lane-chip___2SLO5.kx-post__species___184ge.kx-post__on___22H_A { border-style: solid; color: #00838F; }
.kx-post__kxa-lane-chipdot___AM85T { color: #D4D4D8; font-size: 15px; padding: 0 2px; user-select: none; }
.kx-post__kxa-lane-filterx___1KWAn {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 999px; margin-left: 2px;
background: #FDF0F5; color: #D81B60; font-size: 10px; font-weight: 700; line-height: 1;
}
@media (hover: hover) { .kx-post__kxa-lane-filterx___1KWAn:hover { background: #F9C7D8; } }
/* r50: trending strip — lead phrase + combined two-zone topic pills */
.kx-post__kxa-exp-trend-lead___3A6O2 { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.kx-post__kxa-exp-trend-hint___21Nbj { margin-left: 0; }
.kx-post__kxa-topic-pill___1vbf1 {
display: inline-flex; align-items: stretch; border: 1px solid #E5E7EB; background: #fff;
border-radius: 999px; overflow: hidden;
font: 700 12.5px 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px 5px 12px;
color: #00707E; cursor: pointer;
}
.kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw .kx-post__kx-ic___--XNH { width: 13px; height: 13px; }
/* r57b: long tag names ellipsize so the follow suffix + clear chip stay visible */
.kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw { max-width: min(56vw, 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw:hover { background: #EDFAFC; } }
.kx-post__kxa-topic-pill___1vbf1 .kx-post__fol___1bY1X {
display: inline-flex; align-items: center; padding: 5px 11px 5px 8px;
border-left: 1px solid #F0F1F3; color: #9CA3AF; cursor: pointer; font-weight: 700;
}
@media (hover: hover) { .kx-post__kxa-topic-pill___1vbf1 .kx-post__fol___1bY1X:hover { background: #EDFAFC; color: #00838F; } }
.kx-post__kxa-topic-pill___1vbf1.kx-post__followed___3Fh5q { background: rgba(27,211,230,.12); border-color: rgba(27,211,230,.45); }
.kx-post__kxa-topic-pill___1vbf1.kx-post__followed___3Fh5q .kx-post__fol___1bY1X { color: #0097A7; border-left-color: rgba(27,211,230,.35); }
.kx-post__kxa-topic-pill___1vbf1.kx-post__picked___1zJgA { outline: 2px solid rgba(27,211,230,.45); }
/* r57: the feed's stream identity — day rules, followed-topic wash, recency fade */
.kx-post__kxa-lane-daymark___2-IP7 { display: flex; align-items: center; gap: 8px; margin: 16px 4px 10px; }
/* r58 (founder correction): the feed KEEPS its horizontal-bar identity — no
node dots (those are the library's voice). The r57 bar was 1px at rgba(.4)
fading to transparent: sub-threshold on the light canvas, read as missing.
2px + a stronger fade keeps the aesthetic and becomes reliably visible. */
.kx-post__kxa-lane-daymark___2-IP7 span { font: 700 10.5px ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; color: #0097A7; }
.kx-post__kxa-lane-daymark___2-IP7 i { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(27,211,230,.55), rgba(27,211,230,.06)); }
.kx-post__kxa-lane--followed___HH0nx { background: rgba(27,211,230,.05); border-color: rgba(27,211,230,.3); }
.kx-post__kxa-lane--followed___HH0nx .kx-post__kxa-lane-fade___3ZuIK { background: linear-gradient(90deg, rgba(244,253,254,0), #F4FDFE 85%); }
/* in-lane recency fade: the newest card leads full-strength, older ones recede
(docs lead posts within a lane — v1 ordering note); hover restores. Mixed
lane excluded: pooled order isn't per-source recency. */
.kx-post__kxa-lane___3sDOM:not(.kx-post__kxa-lane--mixed___2k7QN) .kx-post__kxa-lane-row___1Fgu_ > * { transition: opacity .18s ease; }
.kx-post__kxa-lane___3sDOM:not(.kx-post__kxa-lane--mixed___2k7QN) .kx-post__kxa-lane-row___1Fgu_ > *:nth-child(2) { opacity: .88; }
.kx-post__kxa-lane___3sDOM:not(.kx-post__kxa-lane--mixed___2k7QN) .kx-post__kxa-lane-row___1Fgu_ > *:nth-child(3) { opacity: .76; }
.kx-post__kxa-lane___3sDOM:not(.kx-post__kxa-lane--mixed___2k7QN) .kx-post__kxa-lane-row___1Fgu_ > *:nth-child(n+4) { opacity: .72; }
@media (hover: hover) { .kx-post__kxa-lane___3sDOM:not(.kx-post__kxa-lane--mixed___2k7QN) .kx-post__kxa-lane-row___1Fgu_ > *:hover { opacity: 1; } }
/* r57 (founder, three-surfaces) APPEND-ONLY: Explore night hero band + the
trending strip's dark variant (kxa-exp-dark on the strip root) */
.kx-post__kxa-exp-hero___1-sPt { background: linear-gradient(135deg, #04121A, #0B3A44 60%, #0E4652); border-radius: 16px; padding: 18px 20px 12px; margin: 18px 0 14px; }
.kx-post__kxa-exp-hero___1-sPt .kx-post__kx-eyebrow-app___3j_cl { color: #1BD3E6; }
.kx-post__kxa-exp-hero___1-sPt .kx-post__kxa-exp-trend___3qNyh { margin-top: 10px; margin-bottom: 4px; } /* r56: breathing room under the title cluster */
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-exp-trend-cap___1y6Rv { color: #1BD3E6; }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-exp-trend-hint___21Nbj { color: #7E999F; }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1 { border-color: rgba(27,211,230,.45); background: rgba(27,211,230,.14); box-shadow: 0 0 10px rgba(27,211,230,.25); }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw { color: #EAF6F8; }
@media (hover: hover) { .kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1 .kx-post__body___1YOVw:hover { background: rgba(27,211,230,.22); } }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1 .kx-post__fol___1bY1X { color: #A6C1C8; border-left-color: rgba(27,211,230,.35); }
@media (hover: hover) { .kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1 .kx-post__fol___1bY1X:hover { background: rgba(27,211,230,.22); color: #EAF6F8; } }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1.kx-post__followed___3Fh5q { background: rgba(27,211,230,.22); }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1.kx-post__followed___3Fh5q .kx-post__fol___1bY1X { color: #1BD3E6; }
.kx-post__kxa-exp-dark___R6Ag6 .kx-post__kxa-topic-pill___1vbf1.kx-post__picked___1zJgA { outline-color: rgba(27,211,230,.7); }
/* r304: "For you" — the Memory-driven lane (client/components/feed/ForYouLane.jsx). A quiet card
list: title, by · site, the reason line with the spark, the evidence (2 lines, tap to open),
"Ask about this" + ✕. Same ground as the other lanes. */
.kx-post__kxa-foryou___1IufR { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 16px; padding: 11px 13px 13px; margin: 0 0 14px; font-family: 'Inter Regular', Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.kx-post__kxa-foryou--compact___2v9CR { margin: 6px auto 18px; width: min(92vw, 440px); box-sizing: border-box; }
.kx-post__kxa-foryou-hd___14bSH { display: flex; align-items: baseline; gap: 6px; margin: 0 2px 8px; white-space: nowrap; }
.kx-post__kxa-foryou-hd___14bSH::before { content: ""; width: 11px; height: 5.5px; background: #1BD3E6; transform: skewX(-18deg); border-radius: 1px; box-shadow: 0 0 8px rgba(27,211,230,.5); flex: none; align-self: center; }
.kx-post__kxa-foryou-empty___3RjiE { font-size: 12.5px; color: #9CA3AF; padding: 4px 2px 2px; }
.kx-post__kxa-foryou-list___2_-H7 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.kx-post__kxa-foryou--compact___2v9CR .kx-post__kxa-foryou-list___2_-H7 { grid-template-columns: minmax(0, 1fr); }
.kx-post__kxa-foryou-card___1dF2_ { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 11px 12px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kx-post__kxa-foryou-top___3bpG2 { display: flex; align-items: flex-start; gap: 8px; }
.kx-post__kxa-foryou-title___23ayM { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: #111827; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .kx-post__kxa-foryou-title___23ayM:hover { color: #00838F; } }
.kx-post__kxa-foryou-x___1CRtY { flex: none; width: 26px; height: 26px; border-radius: 999px; border: none; background: transparent; color: #9CA3AF; font-size: 12px; font-weight: 700; cursor: pointer; margin: -4px -6px 0 0; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .kx-post__kxa-foryou-x___1CRtY:hover { background: #FDF0F5; color: #D81B60; } }
.kx-post__kxa-foryou-meta___1m3bc { font-size: 11.5px; color: #6B7280; display: flex; gap: 5px; align-items: baseline; min-width: 0; }
.kx-post__kxa-foryou-by___Nos_E { font-weight: 700; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-post__kxa-foryou-site___2iXSI { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-post__kxa-foryou-dot___2uh3T { color: #C5CAD1; }
.kx-post__kxa-foryou-why___24ZhP { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: #00838F; line-height: 1.35; }
.kx-post__kxa-foryou-why___24ZhP .kx-post__kx-ic___--XNH { width: 13px; height: 13px; flex: none; margin-top: 2px; stroke: #0097A7; fill: none; stroke-width: 1.7; }
.kx-post__kxa-foryou-why___24ZhP i { font-style: normal; color: #00707E; }
.kx-post__kxa-foryou-ev___2e2ie { font-size: 12.5px; color: #6B7280; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; border-left: 2px solid #E5E7EB; padding-left: 8px; }
.kx-post__kxa-foryou-ev___2e2ie.kx-post__open___mXQD0 { -webkit-line-clamp: unset; display: block; }
.kx-post__kxa-foryou-act___3JtFK { display: flex; gap: 6px; margin-top: 2px; }
.kx-post__kxa-foryou-ask___3GCF3 { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E5E7EB; background: #fff; color: #00838F; border-radius: 999px; padding: 5px 11px; font: 700 12px 'Inter Regular', Inter, -apple-system, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.kx-post__kxa-foryou-ask___3GCF3 .kx-post__kx-ic___--XNH { width: 13px; height: 13px; stroke: #0097A7; fill: none; stroke-width: 1.7; }
@media (hover: hover) { .kx-post__kxa-foryou-ask___3GCF3:hover { background: #EDFAFC; border-color: rgba(27,211,230,.45); } }
/* r304: chat entry point #1 — "What's new from my network" beside the feed title */
.kx-post__kxa-whatsnew___mNpM4 { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; border: 1px solid rgba(27,211,230,.45); background: linear-gradient(135deg, rgba(27,211,230,.14), rgba(255,92,138,.10)); color: #00838F; border-radius: 999px; padding: 7px 13px; font: 700 12.5px 'Inter Regular', Inter, -apple-system, sans-serif; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.kx-post__kxa-whatsnew___mNpM4 .kx-post__kx-ic___--XNH { width: 14px; height: 14px; stroke: #0097A7; fill: none; stroke-width: 1.7; }
@media (hover: hover) { .kx-post__kxa-whatsnew___mNpM4:hover { background: linear-gradient(135deg, rgba(27,211,230,.22), rgba(255,92,138,.14)); } }
.kx-post__kxa-whatsnew-row___24pFx { display: flex; justify-content: center; margin: 0 0 12px; }
.kx-post__kxa-whatsnew-row___24pFx .kx-post__kxa-whatsnew___mNpM4 { margin-left: 0; }
/* imported from plugin.css */
.plugin__draftJsEmojiPlugin__emojiSelect__34S1B___3RfxJ {
display: inline-block;
}
.plugin__draftJsEmojiPlugin__emojiSelectButton__3sPol___2C4-L, .plugin__draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu___22jis {
margin: 0;
padding: 0;
width: 2.5em;
height: 1.5em;
box-sizing: border-box;
line-height: 1.2em;
font-size: 1.5em;
color: #888;
background: #fff;
border: 1px solid #ddd;
border-radius: 1.5em;
cursor: pointer;
}
.plugin__draftJsEmojiPlugin__emojiSelectButton__3sPol___2C4-L:focus, .plugin__draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu___22jis:focus {
outline: 0;
/* reset for :focus */
}
.plugin__draftJsEmojiPlugin__emojiSelectButton__3sPol___2C4-L:hover, .plugin__draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu___22jis:hover {
background: #f3f3f3;
}
.plugin__draftJsEmojiPlugin__emojiSelectButton__3sPol___2C4-L:active, .plugin__draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu___22jis:active {
background: #e6e6e6;
}
.plugin__draftJsEmojiPlugin__emojiSelectButtonPressed__2Tezu___22jis {
background: #ededed;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopover__1J1s0___2rXTB {
margin-top: 10px;
padding: 0 .3em;
position: absolute;
z-index: 1000;
box-sizing: content-box;
background: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 30px 0 gainsboro;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverClosed__3Kxxq___1dtAt {
display: none;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverTitle__3tpXz___vxI_F {
margin: 0 0 .3em;
padding-left: 1em;
height: 2.5em;
line-height: 2.5em;
font-weight: normal;
font-size: 1em;
color: #9e9e9e;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m___2-sga {
margin: 0 0 .3em;
position: relative;
z-index: 0;
width: 21em;
height: 20em;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroup__3zwcE___14k5x {
padding: 0 .5em;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroup__3zwcE___14k5x:first-child .plugin__draftJsEmojiPlugin__emojiSelectPopoverGroupTitle__2pC51___1Ftl_ {
display: none;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroupTitle__2pC51___1Ftl_ {
margin: 1em 0;
padding-left: .5em;
font-weight: normal;
font-size: 1em;
color: #9e9e9e;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroupList__HQ8_y___39c4_ {
margin: 0;
padding: 0;
display: -webkit-box;
display: flex;
list-style: none;
flex-wrap: wrap;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroupItem__2pFOS___3WNvb {
width: 2.5em;
height: 2.5em;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverToneSelect__28bny___1Otz4 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverToneSelectList__haFSJ___tAIvP {
margin: .3em;
padding: .3em;
position: absolute;
display: -webkit-box;
display: flex;
list-style: none;
border: 1px solid #e0e0e0;
border-radius: .5em;
background: #fff;
box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.1);
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverToneSelectItem__2SgvL___bgw5X {
width: 2.5em;
height: 2.5em;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverToneSelectItem__2SgvL___bgw5X:first-child {
border-right: 1px solid #e0e0e0;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverEntry__1ErDJ___3QZrP, .plugin__draftJsEmojiPlugin__emojiSelectPopoverEntryFocused__M28XS___184kz {
padding: 0;
width: 100%;
height: 100%;
background: none;
border: none;
outline: none;
transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverEntryFocused__M28XS___184kz {
background-color: #efefef;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverEntryIcon__1yNaC___B1y5r {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverNav__1Nzd7___4RfvM {
margin: 0;
padding: 0 .5em;
display: -webkit-box;
display: flex;
width: 20em;
list-style: none;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverNavItem__qydCX___349Fs {
width: 2.5em;
height: 2.5em;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverNavEntry__1OiGB___22HyG, .plugin__draftJsEmojiPlugin__emojiSelectPopoverNavEntryActive__2j-Vk___26_Qu {
padding: 0;
width: 100%;
height: 100%;
font-size: 1.2em;
color: #bdbdbd;
background: none;
border: none;
outline: none;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverNavEntryActive__2j-Vk___26_Qu {
color: #42a5f5;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6___1jVox {
position: absolute;
right: 0;
top: .3em;
bottom: .3em;
width: .25em;
background-color: #e0e0e0;
border-radius: .125em;
opacity: .1;
transition: opacity .4s;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverScrollbarThumb__jGYdG___2pXEY {
background-color: #000;
border-radius: .125em;
cursor: pointer;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m___2-sga:hover .plugin__draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6___1jVox {
opacity: .3;
}
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m___2-sga .plugin__draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6___1jVox:hover,
.plugin__draftJsEmojiPlugin__emojiSelectPopoverGroups__35t9m___2-sga .plugin__draftJsEmojiPlugin__emojiSelectPopoverScrollbar__1Xjc6___1jVox:active {
opacity: .6;
}
.plugin__draftJsEmojiPlugin__emoji__2oqBk___oi4Gt {
background-position: center;
/* make sure the background the image is only shown once */
background-repeat: no-repeat;
background-size: contain;
/* move it a bit further down to align it nicer with the text */
vertical-align: middle;
/*
We need to limit the emoji width because it can be multiple characters
long if it is a 32bit unicode. Since the proper width depends on the font and
it's relationship between 0 and other characters it's not ideal. 1.95ch is not
the best value, but hopefully a good enough approximation for most fonts.
*/
display: inline-block;
overflow: hidden;
max-width: 1.95ch;
/*
Needed for iOS rendering to avoid some icons using a lot of height without
actually needing it.
*/
max-height: 1em;
line-height: inherit;
margin: -.2ex 0em .2ex;
/*
In the past we used opacity: 0 to hide the original Emoji icon no matter what
system it is. Recently we switched to color: transparent since it started to
work in recent iOS version.
*/
color: transparent;
/*
Some SVG files (say 2764 for :heart:) don't have default width/height, thus
may not be rendered properly on some platforms/browsers (e.g., Windows 10 +
Chrome 61).
*/
min-width: 1em;
}
.plugin__draftJsEmojiPlugin__emojiSuggestionsEntry__2-2p____E5UKG {
padding: 5px 10px 1px 10px;
transition: background-color 0.4s cubic-bezier(.27,1.27,.48,.56);
}
.plugin__draftJsEmojiPlugin__emojiSuggestionsEntry__2-2p____E5UKG:active {
background-color: #cce7ff;
}
.plugin__draftJsEmojiPlugin__emojiSuggestionsEntryFocused__XDntY___3iRjp {
background-color: #e6f3ff;
}
.plugin__draftJsEmojiPlugin__emojiSuggestionsEntryText__2sPjk___1ZGms {
display: inline-block;
margin-left: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 368px;
font-size: 0.9em;
}
.plugin__draftJsEmojiPlugin__emojiSuggestionsEntryIcon__1qC2V___3ZpQ2 {
width: 1em;
height: 1em;
margin-left: 0.25em;
margin-right: 0.25em;
display: inline-block;
}
.plugin__draftJsEmojiPlugin__emojiSuggestions__2ffcV___1OMo3 {
border: 1px solid #eee;
margin-top: 1.75em;
position: absolute;
min-width: 220px;
max-width: 440px;
background: #fff;
border-radius: 2px;
box-shadow: 0px 4px 30px 0px rgba(220,220,220,1);
cursor: pointer;
padding-top: 8px;
padding-bottom: 8px;
z-index: 2;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
}
/* imported from plugin.css */
.plugin__draftJsHashtagPlugin__hashtag__1wMVC___3Cj1B {
color: #5e93c5;
}
/* imported from plugin.css */
.plugin__draftJsLinkifyPlugin__link__2ittM___1LeTJ, .plugin__draftJsLinkifyPlugin__link__2ittM___1LeTJ:visited {
color: #5e93c5;
text-decoration: none;
}
.plugin__draftJsLinkifyPlugin__link__2ittM___1LeTJ:hover, .plugin__draftJsLinkifyPlugin__link__2ittM___1LeTJ:focus {
color: #7eadda;
outline: 0; /* reset for :focus */
cursor: pointer;
}
.plugin__draftJsLinkifyPlugin__link__2ittM___1LeTJ:active {
color: #4a7bab;
}
/* imported from plugin.css */
.plugin__draftJsMentionPlugin__mention__29BEd___ra__7, .plugin__draftJsMentionPlugin__mention__29BEd___ra__7:visited {
color: #575f67;
cursor: pointer;
display: inline-block;
background: #e6f3ff;
padding-left: 2px;
padding-right: 2px;
border-radius: 2px;
text-decoration: none;
}
.plugin__draftJsMentionPlugin__mention__29BEd___ra__7:hover, .plugin__draftJsMentionPlugin__mention__29BEd___ra__7:focus {
color: #677584;
background: #edf5fd;
outline: 0; /* reset for :focus */
}
.plugin__draftJsMentionPlugin__mention__29BEd___ra__7:active {
color: #222;
background: #455261;
}
.plugin__draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm___3IwC_ {
padding: 7px 10px 3px 10px;
transition: background-color 0.4s cubic-bezier(.27,1.27,.48,.56);
}
.plugin__draftJsMentionPlugin__mentionSuggestionsEntry__3mSwm___3IwC_:active {
background-color: #cce7ff;
}
.plugin__draftJsMentionPlugin__mentionSuggestionsEntryFocused__3LcTd___2A3lR {
background-color: #e6f3ff;
}
.plugin__draftJsMentionPlugin__mentionSuggestionsEntryText__3Jobq___3DucA {
display: inline-block;
margin-left: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 368px;
font-size: 0.9em;
margin-bottom: 0.2em;
}
.plugin__draftJsMentionPlugin__mentionSuggestionsEntryAvatar__1xgA9___3QLuz {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 12px;
}
.plugin__draftJsMentionPlugin__mentionSuggestions__2DWjA___Wbph7 {
border: 1px solid #eee;
margin-top: 0.4em;
position: absolute;
min-width: 220px;
max-width: 440px;
background: #fff;
border-radius: 2px;
box-shadow: 0px 4px 30px 0px rgba(220,220,220,1);
cursor: pointer;
padding-top: 8px;
padding-bottom: 8px;
z-index: 2;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-sizing: border-box;
-webkit-transform: scale(0);
transform: scale(0);
}
/* imported from Draft.css
*/
/**
* Draft v0.10.5
*
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
.Draft__DraftEditor-editorContainer___3rocv,.Draft__DraftEditor-root___3nHsE,.Draft__public-DraftEditor-content___2t-zp{height:inherit;text-align:initial}
.Draft__public-DraftEditor-content___2t-zp[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}
.Draft__DraftEditor-root___3nHsE{position:relative}
.Draft__DraftEditor-editorContainer___3rocv{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}
.Draft__public-DraftEditor-block___1h6gx{position:relative}
.Draft__DraftEditor-alignLeft___1-X4d .Draft__public-DraftStyleDefault-block____B4Xp{text-align:left}
.Draft__DraftEditor-alignLeft___1-X4d .Draft__public-DraftEditorPlaceholder-root___3hOoS{left:0;text-align:left}
.Draft__DraftEditor-alignCenter___PA5j_ .Draft__public-DraftStyleDefault-block____B4Xp{text-align:center}
.Draft__DraftEditor-alignCenter___PA5j_ .Draft__public-DraftEditorPlaceholder-root___3hOoS{margin:0 auto;text-align:center;width:100%}
.Draft__DraftEditor-alignRight___74dUL .Draft__public-DraftStyleDefault-block____B4Xp{text-align:right}
.Draft__DraftEditor-alignRight___74dUL .Draft__public-DraftEditorPlaceholder-root___3hOoS{right:0;text-align:right}
.Draft__public-DraftEditorPlaceholder-root___3hOoS{color:#9197a3;position:absolute;z-index:1}
.Draft__public-DraftEditorPlaceholder-hasFocus___2A2cx{color:#bdc1c9}
.Draft__DraftEditorPlaceholder-hidden___7zc9Q{display:none}
.Draft__public-DraftStyleDefault-block____B4Xp{position:relative;white-space:pre-wrap}
.Draft__public-DraftStyleDefault-ltr___3LZxs{direction:ltr;text-align:left}
.Draft__public-DraftStyleDefault-rtl___1Aink{direction:rtl;text-align:right}
.Draft__public-DraftStyleDefault-listLTR___3ywJw{direction:ltr}
.Draft__public-DraftStyleDefault-listRTL___3Kw3I{direction:rtl}
.Draft__public-DraftStyleDefault-ol___11Vp2,.Draft__public-DraftStyleDefault-ul___2oDsw{margin:16px 0;padding:0}
.Draft__public-DraftStyleDefault-depth0___1a3Ao.Draft__public-DraftStyleDefault-listLTR___3ywJw{margin-left:1.5em}
.Draft__public-DraftStyleDefault-depth0___1a3Ao.Draft__public-DraftStyleDefault-listRTL___3Kw3I{margin-right:1.5em}
.Draft__public-DraftStyleDefault-depth1___3tzRF.Draft__public-DraftStyleDefault-listLTR___3ywJw{margin-left:3em}
.Draft__public-DraftStyleDefault-depth1___3tzRF.Draft__public-DraftStyleDefault-listRTL___3Kw3I{margin-right:3em}
.Draft__public-DraftStyleDefault-depth2___3XKCH.Draft__public-DraftStyleDefault-listLTR___3ywJw{margin-left:4.5em}
.Draft__public-DraftStyleDefault-depth2___3XKCH.Draft__public-DraftStyleDefault-listRTL___3Kw3I{margin-right:4.5em}
.Draft__public-DraftStyleDefault-depth3___1kqra.Draft__public-DraftStyleDefault-listLTR___3ywJw{margin-left:6em}
.Draft__public-DraftStyleDefault-depth3___1kqra.Draft__public-DraftStyleDefault-listRTL___3Kw3I{margin-right:6em}
.Draft__public-DraftStyleDefault-depth4___3WnaK.Draft__public-DraftStyleDefault-listLTR___3ywJw{margin-left:7.5em}
.Draft__public-DraftStyleDefault-depth4___3WnaK.Draft__public-DraftStyleDefault-listRTL___3Kw3I{margin-right:7.5em}
.Draft__public-DraftStyleDefault-unorderedListItem___1w4l2{list-style-type:square;position:relative}
.Draft__public-DraftStyleDefault-unorderedListItem___1w4l2.Draft__public-DraftStyleDefault-depth0___1a3Ao{list-style-type:disc}
.Draft__public-DraftStyleDefault-unorderedListItem___1w4l2.Draft__public-DraftStyleDefault-depth1___3tzRF{list-style-type:circle}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w{list-style-type:none;position:relative}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-listLTR___3ywJw:before{left:-36px;position:absolute;text-align:right;width:30px}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-listRTL___3Kw3I:before{position:absolute;right:-36px;text-align:left;width:30px}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w:before{content:counter(ol0) ". ";counter-increment:ol0}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-depth1___3tzRF:before{content:counter(ol1) ". ";counter-increment:ol1}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-depth2___3XKCH:before{content:counter(ol2) ". ";counter-increment:ol2}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-depth3___1kqra:before{content:counter(ol3) ". ";counter-increment:ol3}
.Draft__public-DraftStyleDefault-orderedListItem___13S7w.Draft__public-DraftStyleDefault-depth4___3WnaK:before{content:counter(ol4) ". ";counter-increment:ol4}
.Draft__public-DraftStyleDefault-depth0___1a3Ao.Draft__public-DraftStyleDefault-reset___NE-hC{counter-reset:ol0}
.Draft__public-DraftStyleDefault-depth1___3tzRF.Draft__public-DraftStyleDefault-reset___NE-hC{counter-reset:ol1}
.Draft__public-DraftStyleDefault-depth2___3XKCH.Draft__public-DraftStyleDefault-reset___NE-hC{counter-reset:ol2}
.Draft__public-DraftStyleDefault-depth3___1kqra.Draft__public-DraftStyleDefault-reset___NE-hC{counter-reset:ol3}
.Draft__public-DraftStyleDefault-depth4___3WnaK.Draft__public-DraftStyleDefault-reset___NE-hC{counter-reset:ol4}
/* imported from index.css */
.index__slide-up-enter___3_Bjo,
.index__slide-up-appear___1KVku {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-up-leave___2zsEW {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-up-enter___3_Bjo.index__slide-up-enter-active___3a6dU,
.index__slide-up-appear___1KVku.index__slide-up-appear-active___r2hO6 {
animation-name: index__antSlideUpIn___2r_hB;
animation-play-state: running;
}
.index__slide-up-leave___2zsEW.index__slide-up-leave-active___1GBut {
animation-name: index__antSlideUpOut___3F8tk;
animation-play-state: running;
}
.index__slide-up-enter___3_Bjo,
.index__slide-up-appear___1KVku {
opacity: 0;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.index__slide-up-leave___2zsEW {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.index__slide-down-enter___32Vjd,
.index__slide-down-appear___3i7_b {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-down-leave___1FWjh {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-down-enter___32Vjd.index__slide-down-enter-active___3A0Z5,
.index__slide-down-appear___3i7_b.index__slide-down-appear-active___3ESWy {
animation-name: index__antSlideDownIn___35Z_I;
animation-play-state: running;
}
.index__slide-down-leave___1FWjh.index__slide-down-leave-active___ScDlE {
animation-name: index__antSlideDownOut___2e4I6;
animation-play-state: running;
}
.index__slide-down-enter___32Vjd,
.index__slide-down-appear___3i7_b {
opacity: 0;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.index__slide-down-leave___1FWjh {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.index__slide-left-enter___2jq9u,
.index__slide-left-appear___3wMbF {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-left-leave___dysDO {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-left-enter___2jq9u.index__slide-left-enter-active___2vYZg,
.index__slide-left-appear___3wMbF.index__slide-left-appear-active___1uyGL {
animation-name: index__antSlideLeftIn___1cU0e;
animation-play-state: running;
}
.index__slide-left-leave___dysDO.index__slide-left-leave-active___1C7b3 {
animation-name: index__antSlideLeftOut___1aiA8;
animation-play-state: running;
}
.index__slide-left-enter___2jq9u,
.index__slide-left-appear___3wMbF {
opacity: 0;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.index__slide-left-leave___dysDO {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.index__slide-right-enter___3NHU7,
.index__slide-right-appear___3Ckqw {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-right-leave___3wFRs {
animation-duration: .2s;
animation-fill-mode: both;
animation-play-state: paused;
}
.index__slide-right-enter___3NHU7.index__slide-right-enter-active___3W4su,
.index__slide-right-appear___3Ckqw.index__slide-right-appear-active___2YBey {
animation-name: index__antSlideRightIn___UHOBJ;
animation-play-state: running;
}
.index__slide-right-leave___3wFRs.index__slide-right-leave-active___JOknT {
animation-name: index__antSlideRightOut___1YdCq;
animation-play-state: running;
}
.index__slide-right-enter___3NHU7,
.index__slide-right-appear___3Ckqw {
opacity: 0;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.index__slide-right-leave___3wFRs {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes index__antSlideUpIn___2r_hB {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes index__antSlideUpOut___3F8tk {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
}
@keyframes index__antSlideDownIn___35Z_I {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
}
@keyframes index__antSlideDownOut___2e4I6 {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
}
@keyframes index__antSlideLeftIn___1cU0e {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
}
@keyframes index__antSlideLeftOut___1aiA8 {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
}
@keyframes index__antSlideRightIn___UHOBJ {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
}
@keyframes index__antSlideRightOut___1YdCq {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
}
.index__rc-editor-mention-wrapper___39ayk {
cursor: text;
line-height: 26px;
font-size: 12px;
height: 26px;
border: 1px solid #D9D9D9;
border-radius: 5px;
}
.index__rc-editor-mention-wrapper___39ayk.index__multilines___r-X1P {
height: auto;
}
.index__rc-editor-mention-wrapper___39ayk .index__DraftEditor-root___19daB {
position: relative;
}
.index__rc-editor-mention-editor___1-r2a {
width: 100%;
outline: 0;
-moz-appearance: textfield;
line-height: 26px;
height: 26px;
transition: all 0.3s ease;
color: #666666;
border: 0;
border-radius: 5px;
padding: 0;
}
.index__rc-editor-mention-editor-wrapper___150rK {
overflow-y: auto;
}
.index__rc-editor-mention-dropdown___1umMm {
position: absolute;
background-color: white;
max-height: 200px;
overflow-y: auto;
line-height: 1;
border: 1px solid #eee;
margin-top: 1.25em;
min-width: 220px;
max-width: 440px;
border-radius: 2px;
box-shadow: 0 4px 30px 0 #dcdcdc;
cursor: pointer;
padding-top: 8px;
padding-bottom: 8px;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
box-sizing: border-box;
}
.index__rc-editor-mention-dropdown-item___3cRC6 {
padding: 7px 10px 3px;
-webkit-transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
transition: background-color 0.4s cubic-bezier(0.27, 1.27, 0.48, 0.56);
}
.index__rc-editor-mention-dropdown-item___3cRC6.index__focus___2hk_B,
.index__rc-editor-mention-dropdown-item___3cRC6:hover {
background-color: #e6f3ff;
}
.index__avatar___11E2P {
float: left;
width: 32px;
height: 32px;
margin-right: 5px;
display: inline-block;
overflow: hidden;
line-height: 1;
vertical-align: middle;
border-radius: 3px;
}
.index__tag-avatar___1j67c {
width: 16px;
height: 16px;
}
.index__slide-up-enter___3_Bjo.index__slide-up-enter-active-placement-bottomLeft___mqtGN,
.index__slide-up-appear___1KVku.index__slide-up-appear-active-placement-bottomLeft___2oG94 {
animation-name: index__antSlideUpIn___2r_hB;
}
.index__slide-up-enter___3_Bjo.index__slide-up-enter-active-placement-topLeft___3pUZz,
.index__slide-up-appear___1KVku.index__slide-up-appear-active-placement-topLeft___1GN9_ {
animation-name: index__antSlideDownIn___35Z_I;
}
.index__slide-up-leave___2zsEW.index__slide-up-leave-active-placement-bottomLeft___15tIZ {
animation-name: index__antSlideUpOut___3F8tk;
}
.index__slide-up-leave___2zsEW.index__slide-up-leave-active-placement-topLeft___23NuR {
animation-name: index__antSlideDownOut___2e4I6;
}
/* imported from styles.css */
/* Collection default theme */
.styles__ReactVirtualized__Collection___2Ys25 {
}
.styles__ReactVirtualized__Collection__innerScrollContainer___1wpSO {
}
/* Grid default theme */
.styles__ReactVirtualized__Grid___2SUC1 {
}
.styles__ReactVirtualized__Grid__innerScrollContainer___3q1PB {
}
/* Table default theme */
.styles__ReactVirtualized__Table___1yPBp {
}
.styles__ReactVirtualized__Table__Grid___1itUj {
}
.styles__ReactVirtualized__Table__headerRow___33g8s {
font-weight: 700;
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.styles__ReactVirtualized__Table__row___3ZiV_ {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.styles__ReactVirtualized__Table__headerTruncatedText___3eKre {
display: inline-block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.styles__ReactVirtualized__Table__headerColumn___19Z4w,
.styles__ReactVirtualized__Table__rowColumn___2TseG {
margin-right: 10px;
min-width: 0px;
}
.styles__ReactVirtualized__Table__rowColumn___2TseG {
text-overflow: ellipsis;
white-space: nowrap;
}
.styles__ReactVirtualized__Table__headerColumn___19Z4w:first-of-type,
.styles__ReactVirtualized__Table__rowColumn___2TseG:first-of-type {
margin-left: 10px;
}
.styles__ReactVirtualized__Table__sortableHeaderColumn___1RR8E {
cursor: pointer;
}
.styles__ReactVirtualized__Table__sortableHeaderIconContainer___1u1DZ {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.styles__ReactVirtualized__Table__sortableHeaderIcon___15mdG {
-webkit-box-flex: 0;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
height: 1em;
width: 1em;
fill: currentColor;
}
/* List default theme */
.styles__ReactVirtualized__List___3HeSX {
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+Iiwibm9kZV9tb2R1bGVzL3JlYWN0LXZpcnR1YWxpemVkL3NvdXJjZS9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdDQUFBOztBQ0FBLDhCQUE4Qjs7QUFFOUI7Q0FDQzs7QUFFRDtDQUNDOztBQUVELHdCQUF3Qjs7QUFFeEI7Q0FDQzs7QUFFRDtDQUNDOztBQUVELHlCQUF5Qjs7QUFFekI7Q0FDQzs7QUFFRDtDQUNDOztBQUVEO0VBQ0UsaUJBQWlCO0VBQ2pCLDBCQUEwQjtFQUMxQixxQkFBYztFQUFkLHFCQUFjO0VBQWQsY0FBYztFQUNkLCtCQUFvQjtFQUFwQiw4QkFBb0I7TUFBcEIsd0JBQW9CO1VBQXBCLG9CQUFvQjtFQUNwQiwwQkFBb0I7TUFBcEIsdUJBQW9CO1VBQXBCLG9CQUFvQjtDQUNyQjtBQUNEO0VBQ0UscUJBQWM7RUFBZCxxQkFBYztFQUFkLGNBQWM7RUFDZCwrQkFBb0I7RUFBcEIsOEJBQW9CO01BQXBCLHdCQUFvQjtVQUFwQixvQkFBb0I7RUFDcEIsMEJBQW9CO01BQXBCLHVCQUFvQjtVQUFwQixvQkFBb0I7Q0FDckI7O0FBRUQ7RUFDRSxzQkFBc0I7RUFDdEIsZ0JBQWdCO0VBQ2hCLG9CQUFvQjtFQUNwQix3QkFBd0I7RUFDeEIsaUJBQWlCO0NBQ2xCOztBQUVEOztFQUVFLG1CQUFtQjtFQUNuQixlQUFlO0NBQ2hCO0FBQ0Q7RUFDRSx3QkFBd0I7RUFDeEIsb0JBQW9CO0NBQ3JCOztBQUVEOztFQUVFLGtCQUFrQjtDQUNuQjtBQUNEO0VBQ0UsZ0JBQWdCO0NBQ2pCOztBQUVEO0VBQ0UscUJBQWM7RUFBZCxxQkFBYztFQUFkLGNBQWM7RUFDZCwwQkFBb0I7TUFBcEIsdUJBQW9CO1VBQXBCLG9CQUFvQjtDQUNyQjtBQUNEO0VBQ0Usb0JBQWU7TUFBZixtQkFBZTtVQUFmLGVBQWU7RUFDZixZQUFZO0VBQ1osV0FBVztFQUNYLG1CQUFtQjtDQUNwQjs7QUFFRCx3QkFBd0I7O0FBRXhCO0NBQ0MiLCJmaWxlIjoibm9kZV9tb2R1bGVzL3JlYWN0LXZpcnR1YWxpemVkL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6W251bGwsIi8qIENvbGxlY3Rpb24gZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fQ29sbGVjdGlvbiB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19Db2xsZWN0aW9uX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIEdyaWQgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fR3JpZCB7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19HcmlkX19pbm5lclNjcm9sbENvbnRhaW5lciB7XG59XG5cbi8qIFRhYmxlIGRlZmF1bHQgdGhlbWUgKi9cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19HcmlkIHtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJSb3cge1xuICBmb250LXdlaWdodDogNzAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xufVxuXG4uUmVhY3RWaXJ0dWFsaXplZF9fVGFibGVfX2hlYWRlclRydW5jYXRlZFRleHQge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1heC13aWR0aDogMTAwJTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9faGVhZGVyQ29sdW1uLFxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG4gIG1pbi13aWR0aDogMHB4O1xufVxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19yb3dDb2x1bW4ge1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbn1cblxuLlJlYWN0VmlydHVhbGl6ZWRfX1RhYmxlX19oZWFkZXJDb2x1bW46Zmlyc3Qtb2YtdHlwZSxcbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fcm93Q29sdW1uOmZpcnN0LW9mLXR5cGUge1xuICBtYXJnaW4tbGVmdDogMTBweDtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJDb2x1bW4ge1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uQ29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbn1cbi5SZWFjdFZpcnR1YWxpemVkX19UYWJsZV9fc29ydGFibGVIZWFkZXJJY29uIHtcbiAgZmxleDogMCAwIDI0cHg7XG4gIGhlaWdodDogMWVtO1xuICB3aWR0aDogMWVtO1xuICBmaWxsOiBjdXJyZW50Q29sb3I7XG59XG5cbi8qIExpc3QgZGVmYXVsdCB0aGVtZSAqL1xuXG4uUmVhY3RWaXJ0dWFsaXplZF9fTGlzdCB7XG59XG4iXX0= */
/* imported from InfiniteLoader.example.css */
/*.ReactVirtualized__Grid__innerScrollContainer {*/
/*background-color: #F5F5F5; !*grey100*!*/
/*}*/
.InfiniteLoader-example__List___1g464 {
width: 100%;
/*border: 1px solid #DDD;*/
border: 0;
outline: 0; /*TODO: might be needed for accessibility. can also use color with zero opacity*/
background-color: #F5F5F5; /*TODO: grey100*/
}
.InfiniteLoader-example__row___RqrEQ {
margin-bottom: 5px;
}
.InfiniteLoader-example__placeholder___3mEVG {
display: inline-block;
height: 1em;
background-color: #DDD;
}
.InfiniteLoader-example__cacheButtonAndCountRow___2W08c {
display: flex;
align-items: center;
}
.InfiniteLoader-example__button___2RO65 {
flex: 0 0 auto;
background-color: #4db6ac;
color: #fff;
appearance: none;
border: none;
padding: .5em 1em;
border-radius: .35em;
font-size: 1em;
}
.InfiniteLoader-example__cacheCountRow___LvO6B {
flex: 1 1 auto;
text-align: right;
color: #bdbdbd;
font-size: .75em;
font-weight: 100;
}
/* imported from InfiniteLoader.example.css */
.InfiniteLoader-example__List___1To2B {
width: 100%;
border: 1px solid #DDD;
}
.InfiniteLoader-example__row___1Is-2 {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 25px;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
}
.InfiniteLoader-example__placeholder___15yrA {
display: inline-block;
height: 1em;
background-color: #DDD;
}
.InfiniteLoader-example__cacheButtonAndCountRow___31rRn {
display: flex;
align-items: center;
}
.InfiniteLoader-example__button___3ho_V {
flex: 0 0 auto;
background-color: #4db6ac;
color: #fff;
appearance: none;
border: none;
padding: .5em 1em;
border-radius: .35em;
font-size: 1em;
}
.InfiniteLoader-example__cacheCountRow___1VqMW {
flex: 1 1 auto;
text-align: right;
color: #bdbdbd;
font-size: .75em;
font-weight: 100;
}