.complete-by{position:relative;display:grid;gap:3px;min-width:190px;max-width:310px;margin-top:12px;padding:11px 13px;border:1px solid #acd2eb;border-left:4px solid #087bc1;border-radius:9px;background:#edf7ff;color:#064d7c;white-space:normal;line-height:1.35}
.complete-by-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.complete-by strong{font-size:15px;font-weight:800;color:inherit}
.complete-by-detail{font-size:11px;font-weight:600}
.complete-by-edit{justify-self:start;margin:4px 0 0;padding:2px 0;min-height:24px;border:0;border-radius:3px;background:transparent;color:inherit;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.complete-by-edit:hover{background:transparent;text-decoration-thickness:2px}
.complete-by--overdue{background:#fff0ed;border-color:#edb6a7;border-left-color:#b43f25;color:#8c2e19}
.complete-by--today{background:#fff8e3;border-color:#e6cd80;border-left-color:#a36d00;color:#795000}
.complete-by--undated,.complete-by--completed{background:#f3f6f8;border-color:#d1dde5;border-left-color:#7c93a6;color:#486074}
.complete-by--undated{border-style:dashed}
.patient-heading .complete-by{min-width:230px}
.import-complete-by{display:block;margin-top:6px;color:#086ca7}
@media(max-width:600px){.complete-by{min-width:170px}.complete-by strong{font-size:14px}.patient-heading .complete-by{min-width:0;width:100%}}
.complete-by--compact{grid-template-columns:1fr auto;align-items:center;gap:0 10px;min-width:185px;max-width:245px;margin:0;padding:5px 9px;border:0;border-left:3px solid;border-radius:4px}
.complete-by--compact strong{grid-column:1/-1;font-size:13px;white-space:nowrap}
.complete-by--compact .complete-by-detail{font-size:11px}
.complete-by--compact .complete-by-edit{margin:0;padding:2px 0;justify-self:end;min-height:24px}