/**
 * validation.css
 * フォームバリデーション用スタイル（VanillaJS版）
 * validationEngine.jquery.css準拠
 */

/* Z-INDEX */
.formError { z-index: 990; }
.formError .formErrorContent { z-index: 991; }

/* 基本スタイル */
.formError {
  position: absolute;
  top: 300px;
  left: 300px;
  display: block;
  cursor: pointer;
  text-align: left;
}

/* インライン表示（promptPosition: "inline"） */
.formError.inline {
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  margin-top: 4px;
}

/* エラーメッセージ本体 */
.formError .formErrorContent {
  width: 100%;
  background: #ee0101;
  position: relative;
  color: #fff;
  min-width: 120px;
  font-size: 11px;
  border: 2px solid #ddd;
  box-shadow: 0 0 6px #000;
  padding: 4px 10px;
  border-radius: 6px;
}

/* インライン時のエラーメッセージ */
.formError.inline .formErrorContent {
  box-shadow: none;
  border: none;
  border-radius: 0;
  display: inline-block;
}

/* エラー状態のフィールド */
input.error,
textarea.error,
select.error {
  border-color: #ee0101 !important;
  background-color: #fff5f5 !important;
}

/* フォーカス時 */
input.error:focus,
textarea.error:focus,
select.error:focus {
  outline-color: #ee0101;
  box-shadow: 0 0 0 2px rgba(238, 1, 1, 0.2);
}