@charset "UTF-8";

/*
 * 二段階認証（HPC-M-88：F9 段6）
 *
 * ログインとトップの中間で出る画面で、アプリの外枠（ヘッダのメニュー・フッタ）は
 * 描かれない。ログイン画面・パスワード再設定画面と同じ作法（#login-header の下に
 * 白い枠を1つ置く）へ揃えている。
 *
 * ⚠ HPC 本体の Users/twoFactor.css は流用しない。あちらは #container / #content を
 *   前提にしたレイアウトで、α は構造が違う（設計 F9 §5-4）。
 * ⚠ ボタンを右寄せにしないこと。横スクロールしないと押せなくなる。
 */

#twofactor-form                        { margin: 128px 0px 0px 0px; padding: 20px 30px 40px; background-color: #ffffff; }
#twofactor-form                        { border-radius: 5px; }
#twofactor-form h2                     { font-size: 20px; color: #7da0ba; font-weight: bold; text-align: center; line-height: 50px; }

#twofactor-form div.tf-panel           { margin: 10px 0 20px 0; }
#twofactor-form p.tf-lead              { margin: 10px 0; color: #34495e; font-size: 16px; line-height: 24px; text-align: left; }
#twofactor-form p.tf-sub               { margin-top: 24px; }
#twofactor-form p.tf-mail              { font-weight: bold; word-break: break-all; }
#twofactor-form p.tf-success           { color: #2e7d32; font-weight: bold; }
#twofactor-form p.tf-failed            { color: #cc0000; font-weight: bold; }
#twofactor-form p.tf-note              { margin: 10px 0 0 0; color: #6c757d; font-size: 14px; line-height: 20px; text-align: left; }

#twofactor-form div.tf-code            { margin: 20px 0 0 0; }
#twofactor-form div.tf-code label      { display: block; margin: 0; padding: 0; color: #34495e; font-size: 16px; line-height: 25px; text-align: left; }
#twofactor-form div.tf-code input      { display: block; margin: 0; width: 100%; font-size: 25px; letter-spacing: 4px; }

/* 「この端末を N 日間信頼する」（HPC-M-88：F9 段7）
   チェックボックスと文言を縦位置で揃える。文言は折り返す前提（日数が入る）。 */
#twofactor-form div.tf-trust           { margin: 20px 0 0 0; display: flex; align-items: flex-start; }
#twofactor-form div.tf-trust input     { margin: 4px 8px 0 0; width: 18px; height: 18px; flex: 0 0 auto; }
#twofactor-form div.tf-trust label     { margin: 0; color: #34495e; font-size: 16px; line-height: 24px; text-align: left; }

#twofactor-form div.message-box        { height: auto; color: red; font-size: 18px; line-height: 26px; text-align: left; }

#twofactor-form div.button-area        { padding: 10px 0 0 0; text-align: center; }
#twofactor-form div.button-area button { display: block; margin: 10px 0 0 0; padding: 0; width: 100%; line-height: 50px; font-size: 18px; }
#twofactor-form div.tf-resend button   { margin-top: 20px; }
#twofactor-form div.tf-exit            { margin: 30px 0 0 0; }