/* Generált és .skill-ribbon alá szűkített Office-szabályok. */
.skill-ribbon .rg2 { display: flex; flex-direction: column; padding: 0 5px; position: relative; flex: 0 0 auto; }
.skill-ribbon .rg2 + .rg2::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 8px; width: 1px; background: #e1e1e1; }
.skill-ribbon .rgc { flex: 1; display: flex; align-items: flex-start; gap: 1px; }
.skill-ribbon .rgt { height: 17px; text-align: center; font-size: 11px; color: #666; white-space: nowrap; position: relative; padding: 0 12px; }
.skill-ribbon .lnch { position: absolute; right: -2px; top: 2px; width: 11px; height: 11px; display: block; border-radius: 2px; }
.skill-ribbon .lnch svg { width: 10px; height: 10px; display: block; }
.skill-ribbon .lnch.hot { background: #d5e3f5; box-shadow: 0 0 0 2px #d5e3f5; }
.skill-ribbon .rb2 { display: flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; color: #262626; position: relative; }
.skill-ribbon .rb2 .dd, .skill-ribbon .fbox2 .dd, .skill-ribbon .fsz2 .dd { font-size: 8px; color: #555; font-weight: 400; margin-left: 2px; }
.skill-ribbon .rb2.big { flex-direction: column; justify-content: flex-start; width: auto; min-width: 46px; max-width: 86px; height: 70px; padding: 3px 3px 0; text-align: center; white-space: normal; line-height: 1.12; font-size: 11.5px; }
.skill-ribbon .rb2.big .bi { width: 32px; height: 32px; display: block; flex: 0 0 32px; }
.skill-ribbon .rb2.big .bi svg { width: 32px; height: 32px; display: block; }
.skill-ribbon .rb2.big .bl { display: block; }
.skill-ribbon .rb2.sm { height: 22px; padding: 0 4px; font-size: 11.5px; }
.skill-ribbon .rb2 .si2 { width: 16px; height: 16px; display: inline-flex; flex: 0 0 16px; font-style: normal; align-items: center; justify-content: center; }
.skill-ribbon .rb2 .si2 svg { width: 16px; height: 16px; display: block; }
.skill-ribbon .rb2.gl, .skill-ribbon .rb2.ico { height: 24px; min-width: 24px; justify-content: center; padding: 0 2px; font-size: 14px; }
.skill-ribbon .rb2.gl .g { font-family: 'Noto Serif', 'Liberation Serif', serif; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.skill-ribbon .rb2.gl .g sub, .skill-ribbon .rb2.gl .g sup { font-size: 9px; }
.skill-ribbon .afc { border-bottom: 4px solid #e02020; line-height: .9; font-weight: 600; }
.skill-ribbon .ahl { background: #ffff00; padding: 0 1px; font-size: 12px; }
.skill-ribbon .rb2.hot { background: #dbe7f6; border-color: #b9d0ee; }
.skill-ribbon .rb2.on { background: #d0d0d0; border-color: #b0b0b0; }
.skill-ribbon .rb2.on.hot { background: #c3d4ea; }
.skill-ribbon .rb2.dis { color: #a3a3a3; }
.skill-ribbon .rb2.dis svg { opacity: .38; filter: grayscale(1); }
.skill-ribbon .rb2.ck { height: 22px; padding: 0 4px; font-size: 11.5px; gap: 6px; }
.skill-ribbon .rb2.ck .cbx { width: 13px; height: 13px; border: 1px solid #666; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.skill-ribbon .rb2.ck.on .cbx::after { content: '✓'; color: #222; }
.skill-ribbon .rcol { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.skill-ribbon .rrow { display: flex; gap: 1px; align-items: center; margin-bottom: 3px; }
.skill-ribbon .rgc > .rrow:first-child { margin-top: 4px; }
.skill-ribbon .rg2 .rgc:has(> .rrow) { flex-direction: column; }
.skill-ribbon .fbox2, .skill-ribbon .fsz2 { height: 22px; border: 1px solid #c6c6c6; background: #fff; display: flex; align-items: center; padding: 0 3px 0 6px; font-size: 12px; justify-content: space-between; margin-right: 2px; }
.skill-ribbon .fbox2 { width: 146px; }
.skill-ribbon .fbox2 .fv { font-family: Carlito, 'Liberation Sans', sans-serif; font-size: 13px; }
.skill-ribbon .fsz2 { width: 44px; }
.skill-ribbon .fbox2.hot, .skill-ribbon .fsz2.hot, .skill-ribbon .fbox2.focus, .skill-ribbon .fsz2.focus { border-color: var(--appc, #2b579a); }
.skill-ribbon .fbox2.focus .fv, .skill-ribbon .fsz2.focus .fv { background: var(--appc, #2b579a); color: #fff; }
.skill-ribbon .fbox2.typing .fv, .skill-ribbon .fsz2.typing .fv { background: none; color: #111; }
.skill-ribbon .stsc { width: 16px; font-size: 8px; line-height: 1.6; color: #555; text-align: center; border-left: 1px solid #e1e1e1; padding-top: 3px; }
.skill-ribbon .tsg { display: flex; gap: 3px; border: 1px solid #e1e1e1; padding: 3px; height: 68px; align-items: center; margin-right: 4px; }
.skill-ribbon .rb2.big .bi.top-hot { background: #dbe7f6; }
.skill-ribbon .rb2.ck.on { background: transparent; border-color: transparent; }
.skill-ribbon .rb2.ck.dis { color: #a3a3a3; }
.skill-ribbon .ol-rsb { height: 22px; border: 1px solid #c8c8c8; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 11.5px; color: #666; background: #fff; }
.skill-ribbon .ol-rsb svg { width: 12px; height: 12px; }
.skill-ribbon .ol-qs { display: grid; grid-template-columns: repeat(2, 86px); grid-auto-rows: 21px; gap: 1px 4px; height: 66px; border: 1px solid #d4d4d4; background: #fff; padding: 1px 18px 1px 3px; position: relative; font-size: 11.5px; }
.skill-ribbon .ol-qs .stsc, .skill-ribbon .ol-arrg .stsc, .skill-ribbon .ol-pv .stsc { position: absolute; right: 0; top: 0; bottom: 0; width: 14px; font-size: 8px; line-height: 1.6; text-align: center; color: #666; border-left: 1px solid #e0e0e0; }
.skill-ribbon .ol-qsi { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.skill-ribbon .ol-qsi i { width: 16px; height: 16px; display: flex; flex: none; }
.skill-ribbon .ol-qsi i svg { width: 16px; height: 16px; }
.skill-ribbon .ol-arrg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; height: 66px; width: 148px; border: 1px solid #d4d4d4; background: #fff; padding: 3px 18px 3px 3px; position: relative; font-size: 11px; box-sizing: border-box; }
.skill-ribbon .ol-arri { border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; padding: 1px; }
.skill-ribbon .ol-arri.on { border-color: var(--appc); background: #deecf9; }
.skill-ribbon .ol-pv { display: flex; gap: 4px; height: 66px; border: 1px solid #d4d4d4; background: #fff; padding: 3px 18px 3px 3px; position: relative; }
.skill-ribbon .ol-pv span { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; border: 1px solid transparent; }
.skill-ribbon .ol-pv span.on { border-color: var(--appc); background: #deecf9; }
.skill-ribbon .ol-pv svg { width: 30px; height: 30px; }
.skill-ribbon .ol-pv b { font-weight: 400; }
.skill-ribbon .ol-rsb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-ribbon .ol-qs { grid-template-columns: repeat(2, 86px); }