/*============================================

    カレンダーの表示色（文字色・背景色）の設定

=============================================*/

/* 平日曜日の色 */
.xdsoft_calendar th { 
    background: #e1e1e1 !important;
}
/*定休曜日の色*/
.xdsoft_calendar th:nth-child(6) { 
    opacity: 0.3;
}
/*土曜の色*/
.xdsoft_calendar th:nth-child(7) {
    background: #eaf0ff !important;
}
.xdsoft_calendar th:nth-child(7),
.xdsoft_calendar td.xdsoft_day_of_week6 {
    color: rgb(13, 76, 184) !important;
}
/*土曜を選択時の文字色*/
.xdsoft_calendar td.xdsoft_day_of_week6.xdsoft_current {
    color: white !important;
}
 /*日曜・祝日の色*/
.xdsoft_calendar th:nth-child(1){ 
    background: rgb(245, 225, 235) !important;
 }
.xdsoft_calendar th:nth-child(1),
.xdsoft_calendar td.jp_holiday,
.xdsoft_calendar td.xdsoft_day_of_week0 { 
    color: rgb(184, 13, 39) !important;
}      
/*日曜・祝日を選択時の文字色*/
.xdsoft_calendar td.jp_holiday.xdsoft_current,
.xdsoft_calendar td.xdsoft_day_of_week0.xdsoft_current {
    color: white !important;
}

/*disabledの要素はクリック不可（当日が休業日だった場合のクリック不可）*/
.xdsoft_disabled { 
    pointer-events: none !important;
}

/*============================================

    スパイラルのcssと揃えるための設定

=============================================*/


/*============================================

    datetimepickerのオリジナルcssを変更する設定

=============================================*/

/* ↓63行目.datetimepickerのwidthの数値によってこちらのwidthも変更が必要*/
.xdsoft_datetimepicker {
    width: 432px;
    padding: 15px 0;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 70%;
    margin-left: 4%;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 18%;
    margin-left: 4%;
}

.xdsoft_datetimepicker .xdsoft_month {
    width: 38%;
    font-size: 16px;
}

.xdsoft_datetimepicker .xdsoft_year{
    width: 5em;
    font-size: 16px;
}

.xdsoft_monthselect{
    width: 4em;
}

.xdsoft_yearselect {
    width: 4em;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
	margin-top: 10px;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 3px 10px 3px 5px;
    text-decoration: none !important;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    margin-left: 35%;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 211px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}   

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    color: #444;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
}

.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
    background: #f5f5f5;
    border: 1px solid rgb(205, 205, 205);
    color: #444;
    font-size: 16px;
    height: 35px;
}

/*============================================

    レスポンシブ設定
    （ブレイクポイントはスパイラルの設定に合わせている）
        
=============================================*/

@media screen and (min-width:726px) and (max-width:981px) {

    /*datetimepickerのデフォルト値を変更する設定*/
    .xdsoft_datetimepicker {
        width: 56%;
    }
}

@media screen and (max-width: 725px) {

    /*datetimepickerのデフォルト値を変更する設定*/
    .xdsoft_datetimepicker {
        width: 90%;
    }
    
    .xdsoft_datetimepicker .xdsoft_calendar {
        padding-top: 0.5em;
    }

    .xdsoft_datetimepicker .xdsoft_month {
        width: 29%;
        font-size: 16px;
    }   
    .xdsoft_datetimepicker .xdsoft_year{
        width: 4em;
        font-size: 16px;
    }

    .xdsoft_datetimepicker .xdsoft_timepicker {
        padding-top: 0.5em;
    }

    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
        margin-left: 30%;
    }    
   
}