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

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

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

/* 平日曜日の色 */
.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と揃えるための設定

    （'.datetime''.datetime p'の設定は
    スパイラル統合時に不要になる可能性あり。
    '.datetimepickerのwidthの設定は必要だと思う）

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

.datetime {
    display: flex;
    align-items: center;
    padding: 50px 0;
}
.datetime p {
    margin: 0 20px;
    padding-bottom: 8px;
}
.datetimepicker {
    width: 420px;
    margin-bottom: 8px;
    padding: 5px;
    color: #333333;
    border: 1px solid #999999;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
    font-size: 108%;
    text-align: left;
}

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

    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 (max-width: 725px) {

    /*スパイラルのcssと揃えるための設定*/
    .datetime {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 50px 5%;
    }    

    .datetime p {
        margin: 0 5% 0 0;
    }  

    .datetimepicker {
		width: 70%;
    }

    /*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%;
    }

    
   
}