#task-checkin-controls{text-align:center;padding:12px 6px 20px}
#task-checkin-controls .hint{margin-bottom:16px}
#task-checkin-controls .task-visit-action{display:inline-flex;align-items:center;justify-content:center;position:relative;width:106px;min-width:106px;height:106px;min-height:106px;border-radius:50%;border:5px solid #cfe7bd;background:#8bd34f;color:white;padding:10px;overflow:visible;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}
#task-checkin-controls #btn-task-check-out{background:#ef665c;border-color:#f8c9c4}
#task-checkin-controls .task-visit-action::before{content:'';position:absolute;inset:-6px;width:auto;height:auto;border-radius:50%;background:conic-gradient(#4b9e2c var(--hold,0%),transparent 0);padding:5px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#task-checkin-controls #btn-task-check-out::before{background:conic-gradient(#b82d29 var(--hold,0%),transparent 0)}
#task-checkin-controls .task-visit-action.is-saving::before{background:conic-gradient(#4b9e2c 75%,transparent 0);animation:punch-saving-spin 1s linear infinite}
#task-checkin-controls #btn-task-check-out.is-saving::before{background:conic-gradient(#b82d29 75%,transparent 0)}
#task-checkin-controls .punch-button-label{font-size:15px;line-height:1.25;white-space:normal}
#task-checkin-controls .punch-gesture-hint{margin-top:14px;font-size:12px}
@media(prefers-reduced-motion:reduce){#task-checkin-controls .task-visit-action.is-saving::before{animation:none}}