/* =========================================
   CF7 DATE PICKER / グレー系スキン
   ・Flatpickr本体（flatpickr.min.css）は読み込んだ状態で、
   　GRM Core標準のmaterial_blueテーマ（青系）は使わず、
   　サイトのグレー基調に合わせて色だけ上書きする。
========================================= */

/* ---- カレンダー本体 ---- */
.flatpickr-calendar{
	border:1px solid #dcdcde;
	border-radius:8px;
	box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{
	display:none;
}

/* ---- 月・年ヘッダー ---- */
.flatpickr-months{
	background:#f6f7f7;
	border-radius:8px 8px 0 0;
}

.flatpickr-current-month{
	font-size:14px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
	color:#333;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
	color:#666;
	fill:#666;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover{
	color:#222;
	fill:#222;
}

/* ---- 曜日 ---- */
.flatpickr-weekdays{
	background:#f6f7f7;
}

span.flatpickr-weekday{
	color:#646970;
	font-weight:700;
}

/* ---- 日付セル ---- */
.flatpickr-day{
	color:#333;
	border-radius:6px;
}

.flatpickr-day.today{
	border-color:#999;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover{
	background:#ececec;
	border-color:#ececec;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today{
	background:#4a4a4a;
	border-color:#4a4a4a;
	color:#fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay{
	color:#ccc;
}

/* ---- 入力欄（Flatpickr適用後のinput） ---- */
input.grm-flatpickr-date{
	background:#fff;
	cursor:pointer;
}