/* ===================================
   Booking Package カレンダー
   O2LABO用
=================================== */


/* =========================
   曜日
========================= */

#booking-package .sun {
    color: #d85b5b;
}

#booking-package .mon,
#booking-package .tue,
#booking-package .wed,
#booking-package .thu,
#booking-package .fri {
    color: #24364b;
}

#booking-package .sat {
    color: #2f73b8;
}

#booking-package .nationalHoliday {
    color: #d85b5b;
}


/* =========================
   カレンダー全体
========================= */

#booking-package_calendarPage {
    background-color: #ffffff;
    border: 1px solid #c9deed;
    border-radius: 10px;
    overflow: hidden;
}


/* =========================
   カレンダー内の罫線
========================= */

#booking-package_calendarPage .dateField,
#booking-package_calendarPage .calendarData {
    border-color: #d7e6f2 !important;
}


/* =========================
   通常の日付セル
========================= */

#booking-package_calendarPage .dateField {
    background-color: #ffffff;
    color: #24364b;
    font-weight: 400;
    transition:
        background-color .2s ease,
        color .2s ease;
}


/* =========================
   予約可能日のホバー
========================= */

#booking-package_calendarPage .dateField:hover {
    background-color: #dff2fc !important;
    color: #0b5b9f !important;
    cursor: pointer;
}


/* =========================
   満室・予約不可日
========================= */

#booking-package_calendarPage .startDateOfFullRoom {
    background: #f0f1f3 !important;
    color: #a1a7ad !important;
    cursor: default;
}

#booking-package_calendarPage .dateOfFullRoom {
    background: #f0f1f3 !important;
    color: #a1a7ad !important;
    cursor: default;
}

#booking-package_calendarPage .endDateOfFullRoom {
    background: #f0f1f3 !important;
    color: #a1a7ad !important;
    cursor: default;
}


/* =========================
   予約不可日はホバーしても
   色を変えない
========================= */

#booking-package_calendarPage .startDateOfFullRoom:hover,
#booking-package_calendarPage .dateOfFullRoom:hover,
#booking-package_calendarPage .endDateOfFullRoom:hover {
    background: #f0f1f3 !important;
    color: #a1a7ad !important;
    cursor: default;
}


/* =========================
   スマホ調整
========================= */

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

    #booking-package_calendarPage {
        border-radius: 6px;
    }

    #booking-package_calendarPage .dateField {
        font-size: 14px;
    }
}