/* #region datePicker */

/* #region Modal */
div.date-picker-modal.modal {
    --bs-modal-padding: 0;
    padding: 0 !important;
}

div.date-picker-modal div.modal-container {
    display: flex;
    justify-content: center;
}

div.date-picker-modal div.modal-dialog {
    --bs-modal-width: 100dvw;
    width: 100%;
    max-width: 616px;
    min-width: 328px;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    margin: auto 16px;
    font-family: PingFang TC;
}


div.date-picker-modal div.modal-content {
    padding: 24px 16px;
    border-radius: 16px;
    max-height: 616px;
}

div.date-picker-modal div.modal-content div.modal-header {
    border-bottom: none;
    padding: 0;
    text-align: center;
}

div.date-picker-modal div.modal-content div.modal-body {
    padding: 24px 0 0 0;
}

div.date-picker-modal div.modal-content div.modal-footer {
    border-top: none;
    padding: 40px 0 0 0;
    display: flex;
}

div.date-picker-modal div.modal-content div.modal-header h5.modal-title {
    color: #076ED7;
    font-size: 21px;
    font-weight: 600;
    line-height: 28px;
    flex: 1 1 auto !important;
}

div.date-picker-modal div.modal-content div.modal-footer button {
    flex: 1 1 auto;
    padding: 12px 0;
    margin: 0;
    border-radius: 8px;
}

div.date-picker-modal div.modal-content div.modal-footer button.btn-cancel {
    border: 1px solid #005BAC;
    background: #ffffff;
    color: #005BAC;
    margin-right: 4px;
}

div.date-picker-modal div.modal-content div.modal-footer button.btn-confirm {
    background: #076ED7;
    color: #ffffff;
    margin-left: 4px;
}

/* #endregion */

/* #region Icon */
/* 隱藏原本的 jQuery UI icon */
.date-picker .ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

/* 左箭頭 (上一月) */
.date-picker .ui-datepicker .ui-datepicker-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%2711%27 viewBox=%270 0 7 11%27><polygon points=%277,0 0,5.5 7,11%27 fill=%27%23666%27/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px 11px;
    cursor: pointer;
}

/* 右箭頭 (下一月) */
.date-picker .ui-datepicker .ui-datepicker-next {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%2711%27 viewBox=%270 0 7 11%27><polygon points=%270,0 7,5.5 0,11%27 fill=%27%23666%27/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px 11px;
    cursor: pointer;
}

/* #endregion */

/* #region 其他樣式 */
.date-picker .ui-datepicker {
    border: none;
    padding: 0;
    width: 100% !important;
}

.date-picker .ui-datepicker .ui-datepicker-header {
    border: none;
    background: none;
}

.date-picker .ui-datepicker-title {
    display: flex;
}

.date-picker .ui-datepicker-year,
.date-picker .ui-datepicker-month {
    flex: 1 1 auto;
    border-radius: 8px;
    border: 1px solid lightgray;
    cursor: pointer;
}

/* 年份後加上"年"(yearSuffix的用法"年"不會在.ui-datepicker-year裡面) */
.date-picker .ui-datepicker-year:after {
    content: "年";
}

/* #region 格子 */

/* 改變所有星期文字顏色 */
.date-picker .ui-datepicker th {
    color: #666;
    font-size: 14px;
}

.date-picker .ui-datepicker .ui-state-default {
    border: none;
    background: none;
    text-align: center;
    color: #131313;
    font-size: 16px;
}

.date-picker .ui-datepicker-other-month {
    color: #989898;
}

.date-picker .ui-datepicker .ui-state-active {
    border-radius: 4px;
    background: #076ED7;
    color: #ffffff;
}

.date-picker .ui-datepicker th {
    padding: 0;
    text-align: center;
}

.date-picker .ui-datepicker td {
    padding: 0;
    text-align: center;
}

/* 寬高 */
.date-picker .ui-datepicker th span,
.date-picker .ui-datepicker td a,
.date-picker .ui-datepicker td span {
    padding: 0;
    display: inline-block;
    width: 27.5px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
}

/* #endregion */

/* #endregion */

/* #endregion */

/* #region yearPicker/monthPicker */

/* #region Modal */
div.year-picker-modal.modal,
div.month-picker-modal.modal {
    --bs-modal-padding: 0;
    padding: 0 !important;
}

div.year-picker-modal div.modal-container,
div.month-picker-modal div.modal-container {
    display: flex;
    justify-content: center;
}

div.year-picker-modal div.modal-dialog,
div.month-picker-modal div.modal-dialog {
    --bs-modal-width: 100dvw;
    width: 100%;
    max-width: 616px;
    min-width: 328px;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    margin: auto 16px;
    font-family: PingFang TC;
}

div.year-picker-modal div.modal-content,
div.month-picker-modal div.modal-content {
    padding: 24px 16px;
    border-radius: 16px;
    max-height: 616px;
}

div.year-picker-modal div.modal-content div.modal-header,
div.month-picker-modal div.modal-content div.modal-header {
    border-bottom: none;
    padding: 0;
    text-align: center;
}

div.year-picker-modal div.modal-content div.modal-body,
div.month-picker-modal div.modal-content div.modal-body {
    padding: 24px 0 0 0;
}

div.year-picker-modal div.modal-content div.modal-footer,
div.month-picker-modal div.modal-content div.modal-footer {
    border-top: none;
    padding: 40px 0 0 0;
    display: flex;
}

div.year-picker-modal div.modal-content div.modal-header h5.modal-title,
div.month-picker-modal div.modal-content div.modal-header h5.modal-title {
    color: #076ED7;
    font-size: 21px;
    font-weight: 600;
    line-height: 28px;
    flex: 1 1 auto !important;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker {
    height: 232px;
    padding: 0 16px;
    overflow: auto;
    scroll-behavior: auto !important;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker::-webkit-scrollbar {
    background: #ffffff;
    width: 4px;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker::-webkit-scrollbar-button {
    visibility: collapse;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker::-webkit-scrollbar-thumb {
    background: #CACED9;
    border-radius: 2px;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker::-webkit-scrollbar-track {
    background: #ffffff;
}

div.year-picker-modal div.modal-content div.modal-body div.year-picker::-webkit-scrollbar-track-piece {
    background: #ffffff;
}


div.month-picker-modal div.modal-content div.modal-body div.month-picker {
    height: 168px;
    padding: 0 16px;
}

/* #endregion */

/* #region Icon */
/* 返回箭頭*/
.year-picker-modal a.modal-prev,
.month-picker-modal a.modal-prev {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%2711%27 viewBox=%270 0 7 11%27 fill=%27none%27><path d=%27M6 1L1 5.5L6 10%27 stroke=%27%23666%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px 11px;
    height: 24px;
    width: 24px;
    cursor: pointer;
}

/* #endregion */

/* #region 其他樣式 */
table.year-table,
table.month-table {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0px 0px;
    padding: 0 16px;
    font-size: 16px;
    color: #000000
}

table.year-table tr.spacer td,
table.month-table tr.spacer td {
    height: 24px;
    border: none;
    background: transparent;
}

/* 格子 */
.year-cell,
.month-cell {
    padding: 8px 16px;
    height: 40px;
    cursor: pointer;
}

.year-cell.active,
.month-cell.active {
    border-radius: 4px;
    background: #076ED7;
    color: #ffffff;
}

/* #endregion */

/* #endregion */