.pinpad-grid{display:grid;gap:.5rem;grid-template-areas:"one two three stop" "four five six correct" "seven eight nine ok" ". zero . ."}.pinpad-button{background-color:#e9e9e9;border:1.5px solid #000;border-radius:2.5rem;font-family:var(--font-roboto);font-size:2.5rem;padding-inline:1.65rem;padding-block:.25rem;line-height:130%;position:relative;display:flex;justify-content:space-between;align-items:center}.pinpad-button:focus,.pinpad-button:hover{outline:4px solid #000;outline-offset:4px}.pinpad-button[data-key=stop]{background-color:#e1583f}.pinpad-button[data-key=correct]{background-color:#e9d03d}.pinpad-button[data-key=ok]{background-color:#44aa51}@media(max-width:600px){.pinpad-button{font-size:28px;border-radius:28px;padding-inline:18px;padding-block:2px}.pinpad-button:focus,.pinpad-button:hover{outline:2px solid #000;outline-offset:3px}}.pinpad-last-column{margin-left:.25rem;font-size:1.5rem;padding-inline-start:1.25rem;padding-inline-end:1rem}.pinpad-last-column .corr-icon,.pinpad-last-column .ok-icon,.pinpad-last-column .stop-icon{opacity:.3;flex:0}.pinpad-last-column .stop-icon{margin-left:7px}.pinpad-last-column .corr-icon{margin-left:0}.pinpad-last-column .ok-icon{margin-left:11px;margin-right:2px}@media(max-width:600px){.pinpad-last-column{margin-left:8px;font-size:17px;padding-inline-start:12px;padding-inline-end:8px}.pinpad-last-column .corr-icon,.pinpad-last-column .ok-icon,.pinpad-last-column .stop-icon{transform:scale(.7)}.pinpad-last-column .stop-icon{margin-left:2px}.pinpad-last-column .ok-icon{margin-left:3px}}.pinpad-empty-cell{background-color:#e9e9e9;border:1.5px solid #000;border-radius:2.5rem}@media(max-width:600px){.pinpad-empty-cell{border-radius:28px}}.custom-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:1px solid black;border-radius:50%;outline:none;position:relative}.custom-radio:checked{background-color:transparent;border:1px solid black}.radio-label{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;cursor:pointer}.radio-label:focus-within{outline:2px solid black;outline-offset:2px}.radio-label:hover{text-decoration:underline}.custom-radio:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background-color:black;animation:radioCircleAppear .1s ease-out forwards}@keyframes radioCircleAppear{0%{transform:translate(-50%,-50%) scale(0)}}