@charset "utf-8";
/*
Boolking Packageの一般設定を以下に変更
定休日のバックグランドカラー：#EEE
選択時の背景カラー：#eb6877
マウスオーバー時の背景カラー：#f7e0e2
*/

/* **********
カレンダーデザイン
********** */
#booking-package_calendarPage .available_day:hover {
    background-color: #f7e0e2;
}
#booking-package_schedulePage .selectable_day_slot:hover,
#booking-package .selectable_time_slot:hover {
    background-color: #f7e0e2;
    color: #000;
}
#booking-package_schedulePage .selected_day_slot,
#booking-package_schedulePage .selected_day_slot:hover {
    background-color: #eb6877;
    color: #fff;
}
#booking-package_schedulePage .closed,
#booking-package_schedulePage .closed:hover {
    background-color: #eee;
    color: #999;
    cursor: default;
}
#booking-package .selectable_time_slot {
    margin: 10px;
    border: solid 1px #ddd;
    border-radius: 5px;
    width: auto;
}

/* **********
入力フォームデザイン
********** */
#booking-package_inputFormPanel .title_in_form {
    padding-bottom: .8em;
}
#booking-package_inputFormPanel .row, #booking-package_myBookingDetails .row, #booking-package_serviceDetails .row, #booking-package_myBookingDetailsFroVisitor .row, #booking-package-user-form .row, #booking-package-loginform .row, #booking-package-user-edit-form .row {
    padding: 0;
}
#booking-package input[type=text], #booking-package textarea, #booking-package-user-form input[type=text], #booking-package-user-form input[type=password], #booking-package-user-form textarea, #booking-package-loginform input[type=text], #booking-package-loginform input[type=password], #booking-package-loginform textarea, #booking-package-user-edit-form input[type=text], #booking-package-user-edit-form input[type=password], #booking-package-user-edit-form textarea, #booking-package-user-edit-form select {
    box-sizing: border-box;
    border: solid 1px #a5a5a5;
    background-color: #fff;
    color: #222;
    padding: .6em .2em;
    box-shadow: none;
    border-radius: 4px;
}
#booking-package_inputFormPanel select, #booking-package-user-form select, #booking-package-user-edit-form select {
    border: solid 1px #a5a5a5;
    border-radius: 4px;
    padding: .6em .2em;
}
#booking-package_inputFormPanel .form_textarea {
	height: 160px;
}
/*説明の表示場所を変更*/
#booking-package_inputFormPanel .row .value:has(div.description) {
	display: flex;
	flex-direction: column-reverse;
}
#booking-package_inputFormPanel .description, #booking-package_durationStay .description {
    margin: 0 0 1em;
}
#booking-package_inputFormPanel .description:empty, #booking-package_durationStay .description:empty {
    margin: 0;
}
#booking-package_inputFormPanel .name, #booking-package_serviceDetails .name, #booking-package_myBookingDetailsFroVisitor .name, #booking-package_myBookingDetails_panel .name, #booking-package-user-form .name, #booking-package-loginform .name, #booking-package-user-edit-form .name,
#booking-package_inputFormPanel .value, #booking-package_serviceDetails .value, #booking-package_myBookingDetailsFroVisitor .value, #booking-package_myBookingDetails_panel .value, #booking-package-user-form .value, #booking-package-loginform .value, #booking-package-user-edit-form .value {
    padding: 1.2em 0;
    box-sizing: border-box;
}
#booking-package_inputFormPanel .name, #booking-package_serviceDetails .name, #booking-package_myBookingDetailsFroVisitor .name, #booking-package_myBookingDetails_panel .name, #booking-package-user-form .name, #booking-package-loginform .name, #booking-package-user-edit-form .name {
    width: 14em;
    display: flex;
    flex-direction: column;
    font-weight: bold;
}
#booking-package_inputFormPanel .value, #booking-package_serviceDetails .value, #booking-package_myBookingDetailsFroVisitor .value, #booking-package_myBookingDetails_panel .value, #booking-package-user-form .value, #booking-package-loginform .value, #booking-package-user-edit-form .value {
    flex: 1;
}
#booking-package_inputFormPanel .required::after, #addCustomFormFieldPanel .required::after {
    content: '必須';
    background-color: #d43f3a;
    color: #fff;
    display: inline;
    width: fit-content;
    margin-left: 0;
    padding: .1em .5em;
    border-radius: 4px;
    font-size: .75em;
}
@media screen and (max-width: 799px) {
    #booking-package_inputFormPanel .title_in_form {
        border: none;
    }
    #booking-package_inputFormPanel .row, #booking-package_myBookingDetails .row, #booking-package_serviceDetails .row, #booking-package_myBookingDetailsFroVisitor .row, #booking-package-user-form .row, #booking-package-loginform .row, #booking-package-user-edit-form .row {
    	border: none;
        display: block;
    }
    #booking-package_inputFormPanel .name, #booking-package_serviceDetails .name, #booking-package_myBookingDetailsFroVisitor .name, #booking-package_myBookingDetails_panel .name, #booking-package-user-form .name, #booking-package-loginform .name, #booking-package-user-edit-form .name {
        width: auto;
        padding: .8em;
        background-color: #faf4eb;
    }
    #booking-package_inputFormPanel .value, #booking-package_serviceDetails .value, #booking-package_myBookingDetailsFroVisitor .value, #booking-package_myBookingDetails_panel .value, #booking-package-user-form .value, #booking-package-loginform .value, #booking-package-user-edit-form .value {
        margin-bottom: .8em;
    }
}
.bottomBarPanel {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.cartPanel .book_now_button {
    background-color: #4cae4c !important;
    border: none !important;
}
#booking-package .return_button,
#booking-package .return_form_button {
    color: #222 !important;
    background-color: #ddd !important;
    border: none !important;
}
#booking-package .cartPanel#paymentPanel {
    margin-top: 1.5em;
}