/*
 * GRE 前台日期選擇器修正
 *
 * Bootstrap Datetimepicker 的外層同時具有 dropdown-menu class，會被
 * assets/css/header*.css 的導覽選單樣式影響；內部 table/td 則會被
 * assets/css/mainLayout*.css 的全域表格樣式影響。
 * 本檔只在日期元件範圍內還原套件需要的版面，避免改動其他頁面。
 */

body .bootstrap-datetimepicker-widget.dropdown-menu {
    position: absolute !important;
    display: block !important;
    float: none !important;
    width: 19em !important;
    min-width: 0 !important;
    max-width: calc(100vw - 30px) !important;
    margin: 2px 0 !important;
    padding: 4px !important;
    transform: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-align: left !important;
    color: #333 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !important;
    z-index: 9999 !important;
}

/*
 * 手機版 header.css 會把所有 .dropdown-menu 改成棕色導覽選單。
 * 除了外層以外，日期頁籤及表格區也明確還原白底，避免透明背景透出棕色。
 */
body .bootstrap-datetimepicker-widget .datepicker-days,
body .bootstrap-datetimepicker-widget .datepicker-days table,
body .bootstrap-datetimepicker-widget .datepicker-days thead,
body .bootstrap-datetimepicker-widget .datepicker-days tbody,
body .bootstrap-datetimepicker-widget .datepicker-days tr {
    background-color: #fff !important;
}

.bootstrap-datetimepicker-widget table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: fixed !important;
    overflow: visible !important;
    border: 0 !important;
    border-collapse: collapse !important;
    z-index: auto !important;
}

    .bootstrap-datetimepicker-widget table thead {
        display: table-header-group !important;
        background-color: #fff !important;
        color: #000 !important;
        font-size: 1em !important;
        line-height: normal !important;
    }

    .bootstrap-datetimepicker-widget table tbody {
        display: table-row-group !important;
        width: auto !important;
    }

    .bootstrap-datetimepicker-widget table tr {
        display: table-row !important;
    }

    .bootstrap-datetimepicker-widget table th,
    .bootstrap-datetimepicker-widget table td,
    .bootstrap-datetimepicker-widget table td.day {
        display: table-cell !important;
        width: auto !important;
        min-width: 0 !important;
        height: 20px !important;
        line-height: 20px !important;
        margin: 0 !important;
        padding: 5px !important;
        border: 0 !important;
        color: #000 !important;
        vertical-align: middle !important;
        text-align: center !important;
    }

        .bootstrap-datetimepicker-widget table td.old,
        .bootstrap-datetimepicker-widget table td.new,
        .bootstrap-datetimepicker-widget table td.disabled,
        .bootstrap-datetimepicker-widget table td.disabled:hover,
        .bootstrap-datetimepicker-widget table th.disabled,
        .bootstrap-datetimepicker-widget table th.disabled:hover {
            color: #777 !important;
        }

        .bootstrap-datetimepicker-widget table td.active,
        .bootstrap-datetimepicker-widget table td.active:hover,
        .bootstrap-datetimepicker-widget table td span.active {
            color: #fff !important;
        }

/* 專案未載入 Bootstrap 3 Glyphicons，改以字元顯示上、下月按鈕。 */
.bootstrap-datetimepicker-widget .glyphicon {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif !important;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-left::before {
    content: "\2039";
    font-size: 20px;
}

.bootstrap-datetimepicker-widget .glyphicon-chevron-right::before {
    content: "\203A";
    font-size: 20px;
}