/* Public top-up page: opened on phones and desktop browsers. */
html { background: #1d2433; }
body { margin: 0; padding: 24px 16px; font: 16px/1.55 "Leelawadee UI", Tahoma, "Segoe UI", sans-serif; color: #2a2f3a; }
.card { max-width: 420px; margin: 0 auto; padding: 24px 22px 26px; background: #f3efe4; border-radius: 10px; }
h1 { margin: 0 0 4px; font-size: 22px; color: #24304a; }
h1 span { color: #b3541e; }
p { margin: 0 0 16px; color: #5a5343; }
label { display: block; margin: 14px 0 4px; font-weight: bold; color: #24304a; }
input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #b9b19d; border-radius: 6px;
        font: 17px Consolas, "Courier New", monospace; background: #ffffff; color: #1c2330; }
input:focus { outline: 2px solid #2a69b8; outline-offset: 1px; }
input.code { text-transform: uppercase; letter-spacing: 1px; }
button { width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 6px; background: #3c9a4a; color: #ffffff;
         font: bold 17px "Leelawadee UI", Tahoma, sans-serif; cursor: url(/static/cursors/hand.cur), pointer; }
button:hover { background: #32873f; }
.msg { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; background: #fbe9e6; border: 1px solid #e6b8b0; color: #9c2f1f; }
.msg.ok { background: #e7f4e8; border-color: #b4d8b8; color: #23672d; }
.note { margin: 18px 0 0; font-size: 14px; color: #6c6555; }

/* Padding of the error page (see error.tmpl): never shown. */
.pad { display: none; }