.diagram-colour-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;grid-column:1/-1;width:100%;padding-top:17px;border-top:1px solid #d9dce6;color:#53617a;font-size:10px;line-height:1.6}.diagram-key-item{display:inline-flex;gap:8px;align-items:center;min-width:0}.diagram-key-swatch{display:block;flex-shrink:0;width:17px;height:3px;background:var(--diagram-key-colour)}.diagram-key-item[data-role=control]>.diagram-key-swatch{background:repeating-linear-gradient(90deg,var(--diagram-key-colour) 0 4px,transparent 4px 6px)}.diagram-key-item[data-role=hazard]>.diagram-key-swatch{height:8px;border:1px solid var(--diagram-key-colour);background:transparent}.diagram-key-item[data-role=isolation]>.diagram-key-swatch{width:3px;height:13px;margin-inline:7px}.diagram-colour-key .diagram-medium-note{flex-basis:100%;font-size:10px;line-height:1.8;margin:1px 0 0;color:#65718b}.chapter-system>.diagram-colour-key--dark{justify-content:center;border-color:#ffffff26;color:#d9e3ef;margin-top:22px;padding-top:17px;gap:10px 20px}.technical-figure>figcaption>.diagram-colour-key{margin-top:2px}.chapter-system:not(.fire-response-system){padding:35px 0 27px}.chapter-system:not(.fire-response-system)>img{min-height:0}.diagram-colour-key--dark .diagram-key-swatch{height:3px}html[dir=rtl] .diagram-colour-key{direction:rtl}
@media(max-width:700px){.diagram-colour-key{font-size:10px;gap:11px 18px;margin-top:20px;padding-top:17px}.diagram-key-item{gap:7px}.diagram-colour-key .diagram-medium-note{font-size:10px;margin-top:4px}.chapter-system>.diagram-colour-key--dark{font-size:10px;justify-content:center;margin-top:18px;padding-top:16px;gap:10px 16px}.chapter-system:not(.fire-response-system){padding:26px 0 24px}.technical-figure>figcaption>.diagram-colour-key{margin-top:18px}.diagram-key-swatch{width:15px}}