/* ==================================================
   カレンダーページ
================================================== */

/* 上部曜日 */
#booking-package_calendarPage .week_slot {
	background-color: #252424 !important;
}
#booking-package_calendarPage .week_slot.sat {
	color: #cce7ff;
}
#booking-package_calendarPage .week_slot.sun{
	color: #ffa1a1;
}

/* 今日の日付 */
#booking-package_calendarPage .today {
	color: #fc4a4a;
}

/* 日付部分 */
#booking-package_calendarPage .dateField {
	padding-bottom: 0 !important;
}

/* 利用可能日のマウスオーバー */
#booking-package_calendarPage .available_day:hover {
	background-color: #707070 !important;
}


/* ==================================================
   スケジュールページ
================================================== */

/* 日付・サービス・時間の選択項目 */
#booking-package_schedulePage .selectable_day_slot,
#booking-package_schedulePage .selectable_service_slot,
#booking-package_schedulePage .selectable_time_slot {
	padding: 10px 20px !important;
}

/* 時間選択画面の日付と曜日を入れ替え */
#booking-package_schedulePage .selectable_day_slot {
	flex-direction: row-reverse;
	justify-content: center !important;
	gap: 15px;
}

/* 選択中の日付 */
#booking-package_schedulePage .selected_day_slot {
	color: #fff !important;
}

/* 休みの日 */
#booking-package_schedulePage .closed {
	color: #4b4b4b !important;
}

/* 土日 */
#booking-package_schedulePage .weekPanel.sat {
	color: #cce7ff;
}
#booking-package_schedulePage .weekPanel.sun {
	color: #ffa1a1;
}

/* 休みの日はクリック・マウスイベントを無効化 */
#booking-package_schedulePage .selectable_day_slot.closed {
	pointer-events: none;
}

/* 日付・コースパネルの位置 */
#booking-package_schedulePage .daysListPanel {
	right: 20% !important;
	width: 20% !important;
}

#booking-package_schedulePage .courseListPanel {
	left: 20% !important;
}

/* サブタイトル */
#booking-package_schedulePage .subtitle {
	font-size: 0.9em;
}


/* ==================================================
   入力フォーム
================================================== */

/* 入力フォーム */
#booking-package input[type="text"],
#booking-package input,
#booking-package select,
#booking-package textarea,
#booking_package_verificationCodeContent input {
	background-color: #555;
	border: 1px solid #555 !important;
	color: #fff;
	padding: 0.5em 1em!important;
	font-size: 0.95em;
}
/* 備考欄 */
#booking-package textarea#booking_package_input_notes {
	height: 100px;
}

/* プレースホルダー */
#booking-package input[type="text"]::placeholder {
	color: #999;
}

/* フォーカス時 */
#booking-package input[type="text"]:focus {
	outline: none;
	background-color: #aaa;
}
#booking-package input[type="text"]:focus::placeholder {
	color: #ddd;
}


/* 入力フォームの各行 */
#booking-package_inputFormPanel .row {
	padding: 15px 10px !important;
	border-color: #111 !important;
}

/* 補足説明 */
#booking-package_inputFormPanel .description {
	font-size: 0.8em;
}

/* 予約確定ボタン */
#booking-package_inputFormPanel .book_now_button {
	padding: 1em;
	font-weight: bold;
	font-size: 1.1em;
	letter-spacing: 0.05em;
}

/* 戻るボタン */
#booking-package_inputFormPanel .return_form_button,
#booking-package button.return_button {
	background-color: #555;
	color: #fff;
	border: 1px solid #555;
	width: 100%;
	margin: 20px 0;
}




/* ==================================================
   ゲスト関連
================================================== */

/* ゲスト情報 */
#booking_package_guests_4,
#booking_package_guests_5,
#booking_package_guests_6 {
	display: flex;
}

/* ゲスト名の幅 */
#booking_package_guests_4 .name,
#booking_package_guests_5 .name,
#booking_package_guests_6 .name {
	width: 70px;
}

/* ゲスト合計人数 */
#booking_package_totalNumberOfGuests {
	display: flex;
	gap: 15px;
}

/* ゲスト追加ボタン */
#booking-package_inputFormPanel .addedGuests_click,
#booking-package_serviceDetails .addedGuests_click,
#booking-package_myBookingDetailsFroVisitor .addedGuests_click,
#booking-package_myBookingDetails .addedGuests_click {
	color: #fff !important;
}


/* ==================================================
   エラー表示
================================================== */

#booking-package_inputFormPanel .error_empty_value,
#booking-package_serviceDetails .error_empty_value,
#booking-package-user-form .error_empty_value,
#booking-package-user-edit-form .error_empty_value {
	background-color: unset !important;
	color: red;
}