.perio-scroll{overflow-x:auto;padding:20px 12px}.perio-arch{min-width:1140px;margin-bottom:36px}.perio-row,.perio-numbers{display:grid;grid-template-columns:180px repeat(16,minmax(50px,1fr));gap:4px;margin-bottom:4px}.perio-label{text-align:right;padding-right:5px;color:var(--muted);line-height:20px}.perio-sites{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.perio-sites input,.perio-marker{width:100%;min-width:0;height:18px;min-height:18px;padding:0!important;text-align:center;border:0!important;border-radius:4px;background:var(--head);color:var(--text);font-size:14px}.perio-sites input::-webkit-inner-spin-button{appearance:none}.perio-marker[aria-pressed=true].bleeding{background:#d82634}.perio-marker[aria-pressed=true].plaque{background:#269ac5}.perio-art{display:grid;grid-template-columns:180px 1fr;gap:4px}.perio-art h4{align-self:center;text-align:right;padding-right:20px;font-size:20px;color:var(--title)}.perio-teeth{height:150px;position:relative;display:grid;grid-template-columns:repeat(16,1fr)}.perio-tooth{position:relative;text-align:center;border-right:1px solid var(--line)}.perio-tooth>span{position:absolute;bottom:4px;font-size:12px}.perio-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.perio-line polyline{fill:none;stroke:#ed2451;stroke-width:1}.perio-line [data-line=probingDepth]{stroke:#268ee6}.perio-numbers{background:var(--head);margin:4px 0;padding:7px 0;text-align:center}.perio-footer{display:flex;justify-content:flex-end;gap:12px;margin:12px}.perio-tooth svg{height:100%;width:100%}

.perio-sites.single{grid-template-columns:1fr}.perio-cycle{height:18px;min-height:18px;padding:0!important;background:var(--head);color:var(--text);border:0!important;border-radius:4px;line-height:18px}.perio-sites input[data-metric=probingDepth]:out-of-range{color:var(--danger)}

.perio-teeth{height:180px;overflow:hidden}.perio-tooth svg{width:62px;height:auto;max-width:none}.perio-tooth{display:flex;justify-content:center}.perio-arch[aria-label="Upper arch"] .perio-teeth[data-surface=lingual],.perio-arch[aria-label="Lower arch"] .perio-teeth[data-surface=buccal]{height:150px}.perio-line{top:0;height:150px}.perio-label button{background:none;border:0;padding:0;height:20px;color:inherit;font-size:inherit}.perio-sites input.perio-danger{color:var(--danger)}
.perio-label button{min-height:20px;line-height:20px}.perio-line{top:25px}