/*** 表格datatable css *************************************************/
.table_background {
    padding-top: 1rem !important;
}

.dataTables_wrapper {
    display: table;
    margin-bottom: 0px;
    width: 100% !important;
    background: #FFF;
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: none !important;
    white-space: nowrap !important;
}

table.dataTable.no-footer {
    border-bottom: none !important;
}

table.dataTable .table-thead-th {
    background: #ECECEC;
    border-radius: 10px;
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 400;
    /* line-height: 140%; */
    color: #777777;
    margin: -5px;

    height: 40px;

    display: flex;
    align-items: center;

    /* text-indent: 10px; */
    padding-left: 10px;
    padding-right: 9px;
}

table.dataTable>thead>tr>th:first-child>.table-thead-th {
    margin-left: -8px;
}

table.dataTable>thead>tr>th:last-child>.table-thead-th {
    margin-right: -8px;
}

table.dataTable>tbody>tr>td {
    background: #F8F6FB;
    border: 0px;
    padding-left: 11px;

    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 700;

    color: #4D4D4D;
}

table.dataTable>tbody>tr>td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-indent: 2px;
}

table.dataTable>tbody>tr>td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

table.dataTable>tbody>tr>td>a.click-color {
    color: #FF7527;
    text-decoration: none;
    cursor: pointer;
}

div.dataTables_scrollBody>table {
    margin-top: -16px !important;
}

.dataTables_scrollBody {
    overflow-y: scroll !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #333;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 2px 10px;
    margin-left: 6px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 2px;


    background: #ECECEC;
    border: 1px solid #ECECEC;
    /* box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06); */
    border-radius: 50px;
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #7A7A7A !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    /* color: #333 !important;
    border: 1px solid rgba(50, 50, 71, 0.3);
    background-color: rgba(50, 50, 71, 0.1);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background: -webkit-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -moz-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -ms-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -o-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%); */
    background: #FFC553;
    border: 1px solid #FFC553;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 50px;
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #FFFFFF !important;
}

table.dataTable>thead>tr>th:not(.sorting_disabled),
table.dataTable>thead>tr>td:not(.sorting_disabled) {
    padding-right: 8px !important;
}

div.dataTables_wrapper div.dataTables_info {
    border: 1px solid #7A7A7A;
    border-radius: 50px;
    padding: 2px 15px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: #7A7A7A !important;
    margin-top: 4px;
}

div.dataTables_wrapper div.dataTables_paginate img,
svg {
    vertical-align: top;
}

div.dataTables_wrapper div.dataTables_length select {
    background: #FFFFFF;
    border: 1px solid #7A7A7A;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 50px;
    color: #7A7A7A;
    padding-left: 5px;
}

.dataTables_wrapper .dataTables_length {
    color: #7A7A7A;
}

.dataTables_info:empty {
    display: none;
}

/*日曆datepicker***********************************/
.ui-widget-header {
    border: none;
    background: #F5F5F5;
    border-radius: 20px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    /* .ui-state-default { */
    /* border: 1px solid #c5c5c5; */
    /* background: #f6f6f6; */
    background: #E5E5E5 !important;
    border: none !important;
    border-radius: 50px !important;
    text-align: center !important;
    color: #777777 !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e !important;
    background: #fffa90 !important;
    color: #777620 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    background: #FF7527 !important;
    border-radius: 50px !important;
    color: #FFFFFF !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: #FF7527 !important;
    color: #ffffff !important;
}

.ui-widget.ui-widget-content {
    background: #F5F5F5;
    /* 777777 */

    border: 1px solid #777777;
    border-radius: 20px;
}

/*daterangepicker*/

.daterangepicker .calendar-table td {
    background: #E5E5E5;
    border-radius: 50px !important;
    color: #777777;
}

.daterangepicker td.off {
    background: #ECECEC;
    border-radius: 50px;
    color: #D7D7D7;
}

.daterangepicker td.start-date.end-date {
    /* border-radius: 4px; */
    background: #FF7527;
    border-radius: 50px;
    color: #FFFFFF;
}

.daterangepicker .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #FF7527 !important;
    border-color: transparent;
    color: #FFF !important;
}

.daterangepicker td.in-range {
    background-color: #FDB68D;
    color: #FFF;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #FF7527;
    border-color: transparent;
    color: #FFF;
}

/*
.daterangepicker td.off {
    background-color: #ECECEC !important;
    border-color: transparent;
    color: #D7D7D7 !important;
} */
.daterangepicker .monthselect {
    /* border: 2px solid #777777; */
    border-radius: 39px;
    /* text-align: center; */
    width: 40% !important;
    padding: 1px 1px 1px 12px !important;
}

.daterangepicker .yearselect {
    /* border: 2px solid #777777; */
    border-radius: 39px;
    text-align: center;
}


/* Modal **********************************************/

.modal-header {
    border-bottom: none;
}

.modal-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    /* line-height: 140%; */
    /* identical to box height, or 34px */
    color: #4D4D4D;
    margin-bottom: -15px;
}

.modal-body label {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 400;
    /* font-size: 20px; */
    line-height: 140%;
    /* identical to box height, or 28px */


    color: #777777;
}

.modal-content {
    border-radius: 20px;
}

.modal-body input,
.modal-body textarea {
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 700;
    /* font-size: 20px; */
    line-height: 140%;
    /* identical to box height, or 28px */


    color: #4D4D4D;
}

/* Button ***********************************/
.btn-customize-yellow {
    background: #FFC553;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 42px;
    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    font-weight: 700;
    /* font-size: 20px; */
    line-height: 28px;
    /* identical to box height, or 28px */
    width: 180px;

    color: #FFFFFF;
}

.btn-customize-yellow:hover {
    color: #FFFFFF;
}

.btn-query {
    background: #FF7527;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06);
    border-radius: 42px;

    font-family: 'Noto Sans TC', sans-serif;
    font-style: normal;
    color: #FFFFFF;
    width: 100%;
}

.btn-query:hover {
    color: #FFFFFF !important;
    background: #FF7527 !important;
    border-color: #FF7527 !important;
}

.btn-query:focus {
    color: #FFFFFF !important;
    background: #FF7527 !important;
    border-color: #FF7527 !important;
    box-shadow: 0px 8px 8px rgba(50, 50, 71, 0.08), 0px 8px 16px rgba(50, 50, 71, 0.06) !important;
}


div.dataTables_processing {
    padding: 20px !important;
    background: #FFFFFF !important;
}

/* swal2 *********************************/
.swal2-title.title-class {
    text-align: left !important;
}

.swal2-confirm.confirm-button-class,
.swal2-confirm.confirm-button-class:active,
.swal2-confirm.confirm-button-class:focus {
    border: 2px solid #FF7527 !important;
    border-radius: 40px !important;
    background: transparent !important;
    color: #FF7527 !important;
    box-shadow: none !important;
    padding: 0.425em 2.2em !important;
    font-weight: 700;
}

.swal2-deny.confirm-button-class,
.swal2-deny.confirm-button-class:active,
.swal2-deny.confirm-button-class:focus {
    border: 2px solid #FF7527 !important;
    border-radius: 40px !important;
    background: transparent !important;
    color: #FF7527 !important;
    box-shadow: none !important;
    padding: 0.425em 2.2em !important;
    font-weight: 700;
}

.swal2-cancel.cancel-button-class,
.swal2-cancel.cancel-button-class:active,
.swal2-cancel.cancel-button-class:focus {
    border: 2px solid #777777 !important;
    border-radius: 40px !important;
    background: transparent !important;
    color: #777777 !important;
    box-shadow: none !important;
    padding: 0.425em 2.2em !important;
    font-weight: 700;
}

.swal2-html-container {
    z-index: 10050 !important;
    overflow-x: hidden !important;
}

.swa2-html-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 20px;
    color: #777777;
}

.swa2-html-title.bold {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    color: #777777;
}

.swal-html-text {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 20px;
    color: #777777;
}

.swal-html-text.bold {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    color: #777777;
    font-weight: 700;
}

.swal2-loader {
    border-color: #FF7527 transparent #FF7527 transparent !important;
}