/* select2 border fix by evaon 20240620 */
.select2-container--bootstrap-5 {
    background-image: initial !important;
    border: none !important;
}

.select2.form-select {
    padding: unset !important;
}

.select2-selection {
    box-shadow: none !important;
    border: 1px solid var(--cui-input-border-color,#b1b7c1) !important;
}

table.table-compact {
    font-size: xx-small;
    white-space: nowrap;
    text-wrap: nowrap;
    vertical-align: middle;
}

    table.table-compact > :not(caption):not(thead) > * > * {
        padding-top: 1px;
        padding-bottom: 1px;
    }

td.table-cell-buttons {
    padding-top: 1px;
    padding-bottom: 1px;
    width: 1px;
    white-space: nowrap;
    padding:0px;
}

div[onclick] {
    cursor: pointer;
}

div.form-check > input.form-check-input {
    height: 80%;
    width: 60px;
    margin-left: -38px !important;
}

.data-table-applied {
}

.dtfh-floatingparent-head {
    background-color: white;
}

.data-table-applied td {
    border-bottom-width: 1px;
}

.data-table-applied th {
    background-color: #808080 !important;
    color: white;
}

td.editable {
    background-color: #b5f2a9 !important;
    cursor: text;
}

/*讓列首固定的地方，不會因為透明背景而看不清楚*/
.fix-col-white {
    background-color: white !important;
}

/*對表格設定為不自動判定欄寬的情況下，某些欄位可能會出現較長文字，但不打算安排完整寬度給他，就會用這個，通常會搭配data-coreui-toggle="tooltip"*/
.text-with-fix-width {
    text-overflow: ellipsis;
    overflow-x: hidden;
}

/*讓欄首的排序小箭頭更加靠右*/
div.dt-column-header > span.dt-column-order {
    right: 0px !important;
}

/*讓欄首的格子減少他的padding，但右側會預留排序的小箭頭空間*/
th.dt-orderable-desc, th.dt-orderable-asc {
    padding: 1px !important;
    padding-right: 15px !important;
}

.custom-tooltip .tooltip-inner {
    max-width: unset !important;
    text-align: unset !important;
}

/*頁面提示醒目特效邊框*/
.page-hint-flashing {
    border: 2px solid #333; /* 這裡的邊框顏色可與閃爍色不同 */
    box-shadow: 0 0 0 transparent; /* 初始狀態不發光 */
    animation: page-hint-flash 1.5s infinite; /* 呼叫 flash 動畫，無限循環 */
}

@keyframes page-hint-flash {
    0%, 100% {
        box-shadow: 0 0 5px 3px rgba(255, 0, 0, 0.5); /* 初始與結束時的光暈 */
    }

    50% {
        box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.8); /* 動畫中間的光暈，顏色與大小更明顯 */
    }
}