@charset "UTF-8";

.form-password-wrap {
  position: relative; /* 子要素の絶対配置の基準とする */
  display: inline-block; /* inputの幅に合わせて親要素の幅を調整する場合 */
  width: 100%; /* 親要素の幅を100%にする場合など、レイアウトに応じて調整 */
}

.form-password-wrap .form-input {
  width: 100%; /* 親要素の幅に合わせて入力欄の幅を100%にする */
  padding-right: 40px; /* アイコンの幅と余白を考慮して調整 */
  box-sizing: border-box; /* paddingを含めて要素の幅を計算する */
}

.form-password-wrap .icon-eye {
  position: absolute; /* 親要素を基準に絶対配置 */
  top: 40%; /* 親要素の上端から40%の位置 */
  right: 10px; /* 親要素の右端から10pxの位置 */
  transform: translateY(-50%); /* アイコンを垂直方向の中央に配置 */
  cursor: pointer; /* クリック可能であることを示す */
  /* 必要に応じて、アイコンのサイズ調整 */
  width: 24px; /* 例: アイコンの幅 */
  height: 24px; /* 例: アイコンの高さ */
  display: flex; /* imgを中央揃えにするため */
  align-items: center;
  justify-content: center;
}

.form-password-wrap .icon-eye img {
  max-width: 100%;
  max-height: 100%;
  display: block; /* imgの下にできる余白をなくす */
}

.overall_message {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: red;
}

.error_message {
  display:block;
  font-size: 14px;
  margin-bottom: 10px;
  color: red;
}