#booking-package .sun {
    background-color: rgba(230, 110, 102, 0.3);
}

#booking-package .mon {
    background-color: rgba(238, 238, 238, 0.5);
}

#booking-package .tue {
    background-color: rgba(238, 238, 238, 0.5);
}

#booking-package .wed {
    background-color: rgba(238, 238, 238, 0.5);
}

#booking-package .thu {
    background-color: rgba(238, 238, 238, 0.5);
}

#booking-package .fri {
    background-color: rgba(238, 238, 238, 0.5);
}

#booking-package .sat {
    background-color: rgba(101, 157, 230, 0.3);
}

#booking-package .nationalHoliday {
    
}

#booking-package_calendarPage .dateField {
    /**
    background-color: #0f9b79;
    color: #fff;
    font-weight: 400;
    background-color:#fff;
    **/
}

#booking-package_calendarPage .startDateOfFullRoom {
    /**
    background-image: repeating-linear-gradient(270deg, #ff8989 0px 50%, transparent 0% 100%);
    **/
}

#booking-package_calendarPage .dateOfFullRoom {
    /**
    background: #ff8989;
    **/
}

#booking-package_calendarPage .endDateOfFullRoom {
    /**
    background-image: repeating-linear-gradient(90deg, #ff8989 0px 50%, transparent 0% 100%);
    **/
}

#booking-package_calendarPage .pastDay{
    color:#d3d3d3;
}
#booking-package_calendarPage .today.pastDay{
    color:#000;
    background-color: #fffff0;
}
.service_name_cost{
    margin-bottom: 5px;
}
.service_name_cost span{
    font-size: 1.2em;
    font-weight: bold;
}
.descriptionOfService{
    font-size: 0.85em;
}
#booking-package_calendarPage .symbolPanel{
    background-color: #fff;
}
.available_day,
.closingDay{
    font-weight: bold;
}
#booking-package_calendarPage .available_day:hover .dateField,
#booking-package_calendarPage .available_day:hover .symbolPanel{
    background-color: #f0f8ff;
}
#booking-package_calendarPage .available_day:hover{
    background-color: #f0f8ff !important;
}
#booking-package_calendarPage .today .dateField{
    background-color: #fffff0;
    font-weight: bold;
}
#booking-package_calendarPage .today::after{
    content:"本日";
    background-color: #fffff0;
    display: inline-block;
    font-size: 0.9em;
}
#booking-package_schedulePage .selected_day_slot{
    background-color: #eee!important;
    font-weight: bold;
}
#booking-package_schedulePage .closed{
    color: #ddd!important;
}
.weekPanel{
    order: 2;
    position: relative;
}
.weekPanel::before{
    content:"(";
}
.weekPanel::after{
    content:")";
}
.selectable_day_slot > div:not([class])::after{
    content:"日";
}

#booking-package .selectable_service_slot:hover{
    background-color:#eee!important;
}
.selectedDate::before{
    content:"【日付】";
}

#booking-package button{
    cursor: pointer;
}
#booking-package_schedulePage button{
    background-color: transparent;
    border: none;
}
#booking-package_schedulePage button.return_button{
    display: flex;
    align-items: center;
}
#booking-package_schedulePage button.return_button::before{
    font-family: 'Material Icons' !important;
    content: "arrow_back";
    padding-right: 5px;
}
.previous_available_day_button,
.next_available_day_button{
    display: none;
}

.arrowLeft span::after,
.arrowRight span::after{
    content: "月";
}

#courseMainPanel::before{
    content:"選択中のメニュー";
    display: block;
    width: 100%;
    padding: 10px;
    background-color: rgba(238, 238, 238, 0.5);
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 0.8em;
}
#courseMainPanel.box_shadow::before{
    content:"メニュー選択してください";
}

#scheduleMainPanel::before{
    content:"時間を選択してください";
    display: block;
    width: 100%;
    padding: 10px;
    background-color: rgba(238, 238, 238, 0.5);
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 0.8em;
}


#booking-package_inputFormPanel .name{
    font-weight: bold!important;
}
.bookingTime::after{
    content:"～";
}
.bookingSubtitle{
    display: block;
}

#booking-package_inputFormPanel .row{
    border: none;
    border-bottom-width:0!important;
    padding: 10px 0!important;
}
#booking-package_inputFormPanel .form_text, #booking-package-loginform .form_text, #booking-package-user-form .form_text, #booking-package-user-edit-form .form_text{
    padding:10px!important;
    box-sizing: border-box;
    background-color: rgba(238, 238, 238, 0.5);
}
#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:#fff!important;
}
#booking-package_inputFormPanel .error_empty_value .form_text, #booking-package-loginform .error_empty_value .form_text, #booking-package-user-form .error_empty_value .form_text, #booking-package-user-edit-form .error_empty_value .form_text{
    background-color: #FFD5D5;
}
.error_empty_value .description{
    margin-top: 2px!important;
}
.error_empty_value .description::after{
    content: "入力してください";
    color: #ff1c1c;
    font-size: 0.8em;
}

#booking-package_inputFormPanel .book_now_button{
    border: 2px solid #000;
    background-color: #000;
    color:#fff;
    font-weight: bold;
    padding: 12px !important;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#booking-package_inputFormPanel .book_now_button::before{
    font-family: 'Material Icons' !important;
    content: "done";
    padding-right: 5px;
}

#booking-package_inputFormPanel .return_form_button{
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0;
    margin: 30px 0 0;
}
#booking-package_inputFormPanel .return_form_button::before{
    font-family: 'Material Icons' !important;
    content: "arrow_back";
    padding-right: 5px;
}

.booking_completed{
    background-color: #ddd;
}
.booking_completed_panel{
    padding: 20px;
    border: 1px solid #ddd;
}
.booking_completed_panel .row{
    opacity: 0.5;
}



@media only screen and (max-width: 480px) {
    #booking-package_schedulePage .daysListPanel{
        right: 25%!important;
        width: 25%!important;
    }
    #booking-package_schedulePage #courseMainPanel.courseListPanel.box_shadow{
        width: 75%!important;
        left: 25%!important;
    }
    #booking-package_schedulePage #courseMainPanel.courseListPanel{
        width: 40%!important;
    }
    #booking-package_schedulePage #scheduleMainPanel.postionCenterForScheduleListPanel{
        width: 60%!important;
        left: 40%!important;
    }
    #booking-package_schedulePage .selectable_day_slot{
        padding: 10px 5px!important;
    }
    #booking-package_calendarPage .calendarHeader{
        flex-wrap: wrap;
    }
    #booking-package_calendarPage .arrowLeft{
        order: 2;
        width: 50%;
    }
    #booking-package_calendarPage div{
        order: 1;
        width: 100%;
    }
    #booking-package_calendarPage .arrowRight{
        order: 3;
        width: 50%;
    }
    #booking-package_calendarPage .arrowFont{
        width: 1em!important;
    }
    #booking-package_calendarPage .today .dateField{
        order: 1;
    }
    #booking-package_calendarPage .today::after{
        order: 2;
    }
    #booking-package_calendarPage .dateField{
        padding:5px 0 0 0!important;
    }
    #booking-package_calendarPage .symbolPanel{
        padding: 0 0 5px 0;
    }
    #booking-package_schedulePage .serviceCost{
        padding-left:0!important;
    }
    .descriptionOfService{
        padding-top:10px;
    }

}