.formlink { margin-top: -8px; text-align: right; }
.formlink a { color: #315e4b; font-size: 12px; font-weight: 700; }
.otpinput { font: 500 28px "DM Mono", monospace !important; letter-spacing: 10px; text-align: center; }
.button.is-loading { color: transparent !important; cursor: wait; pointer-events: none; position: relative; }
.button.is-loading::after { animation: button-spin .7s linear infinite; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; border-top-color: #fff; content: ""; height: 16px; left: calc(50% - 8px); position: absolute; top: calc(50% - 8px); width: 16px; }
.button.ghost.is-loading::after { border-color: rgba(22,63,50,.3); border-top-color: #163f32; }
@keyframes button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-loading::after { animation-duration: 1.4s; } }
.field-error { color: #b63d32; display: block; font-size: 11px; font-weight: 600; line-height: 1.35; margin-top: 5px; max-width: 150px; }
input[aria-invalid="true"] { border-color: #b63d32 !important; outline-color: #b63d32 !important; }
.status.completed { background: #dbf3d2; color: #266424 !important; }
.status.created, .status.approved { background: #fff0bf; color: #765a00 !important; }
.status.voided, .status.failed, .status.declined { background: #f6d8d4; color: #8a2f27 !important; }
@media (min-width: 801px) {
  .creditpicker label { position: relative; }
  .creditpicker .field-error { left: 0; margin-top: 5px; position: absolute; top: 100%; width: 180px; }
}