@charset "utf-8";

/**
 * パスワードの条件枠（HPC-M-88・助っ人クラウドα）
 *
 * HPC本体の css/common/passwordPolicy.css とは別に起こしている。
 * 向こうは HPC本体のレイアウト（default.ctp）を前提にした値で、
 * αのレイアウト（#newpassword-form・入力欄 25px）へ流用すると崩れるため。
 * αのCSSは全画面へ読み込まれるので、すべて #newpassword-form の中へ閉じ込める。
 *
 * 未達成はグレーの「○」で出し、赤は使わない。
 * 赤はサーバから返るエラーメッセージ（div.message-box）だけに使う。
 */

#newpassword-form div.password-policy                        { margin: 20px 0; padding: 12px 16px; border: 1px solid #d0d0d0; border-radius: 5px; background: #fafafa; font-size: 14px; line-height: 1.8; text-align: left; }
#newpassword-form div.password-policy div.pp-heading         { font-weight: bold; margin-bottom: 6px; color: #34495e; }

#newpassword-form div.password-policy ul.pp-list             { margin: 0; padding: 0; list-style: none; }
#newpassword-form div.password-policy ul.pp-list li          { margin: 0; padding: 0; color: #888888; }
#newpassword-form div.password-policy ul.pp-list li.is-done  { color: #2b7a2b; }

#newpassword-form div.password-policy span.pp-mark           { display: inline-block; width: 1.4em; text-align: center; color: #aaaaaa; font-weight: bold; }
#newpassword-form div.password-policy li.is-done span.pp-mark,
#newpassword-form div.password-policy div.is-done span.pp-mark { color: #2b7a2b; }

#newpassword-form div.password-policy div.pp-kinds           { margin-top: 8px; }
#newpassword-form div.password-policy div.pp-kinds-head      { color: #888888; }
#newpassword-form div.password-policy div.pp-kinds-head.is-done { color: #2b7a2b; }
#newpassword-form div.password-policy span.pp-counter        { margin-left: 8px; font-weight: bold; }
/* 画面幅が狭いと注記が見出しから溢れるため、αでは行を分ける */
#newpassword-form div.password-policy span.pp-note           { display: block; margin-left: 1.4em; color: #888888; font-size: 12px; font-weight: normal; }
#newpassword-form div.password-policy div.pp-kinds-head.is-done span.pp-note { color: #888888; }

/* 文字種の4項目は見出しに従属していることが分かるよう字下げする */
#newpassword-form div.password-policy ul.pp-kind-list        { margin-left: 1.8em; }

#newpassword-form div.password-policy p.pp-current-note      { margin: 10px 0 0; color: #666666; font-size: 12px; }
#newpassword-form div.password-policy p.pp-verify            { margin: 6px 0 0; min-height: 1.6em; color: #888888; }
#newpassword-form div.password-policy p.pp-verify.is-done    { color: #2b7a2b; }
#newpassword-form div.password-policy p.pp-verify.is-todo    { color: #888888; }

/* 未入力のうちは枠全体をグレーで出す */
#newpassword-form div.password-policy.is-empty ul.pp-list li,
#newpassword-form div.password-policy.is-empty div.pp-kinds-head { color: #888888; }
#newpassword-form div.password-policy.is-empty span.pp-mark  { color: #aaaaaa; }