/* 清單Table */

@media (min-width: 576px) {
    .index-table th:not(.dataTables_empty) {
        padding-left: 0.5rem;
    }
    .index-table td:not(.dataTables_empty) {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.5rem;
    }
}

.index-table .column-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-table .two-line-cell {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.index-table td.dtfc-fixed-left  {
    border-bottom: 2px solid;
}

.index-table.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #cfe2ff !important;
    box-shadow: unset;
}

.index-table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 0 #0d6efd;
}

.accordion.accordion-index .accordion-item{
    box-shadow: none;
    border: none;
}

/* card */
.card-header.sticky-element {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.card-header-stytle-1 {
    background-color: rgb(239 246 255) !important;
    color: #000000 !important;
    padding: 1rem;
    border-color: rgb(59 130 246) !important;
    border-left: 5px solid;
}

.card-header-stytle-1 + .card-body {
    margin-top: 1.5rem;
}


.card-header-custom {
    padding: 1rem;
}

.card-header-custom + .card-body {
    margin-top: 1.5rem;
}

.card-header-custom.card-header-bg-1 {
    background-color: rgb(239 246 255) !important;
    color: #000000 !important;
    border-color: rgb(59 130 246) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-2 {
    background-color: rgb(240 253 244) !important;
    color: #000000 !important;
    border-color: rgb(34 197 94) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-3 {
    background-color: rgb(254 252 232) !important;
    color: #000000 !important;
    border-color: rgb(234 179 8) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-4 {
    background-color: rgb(250 245 255) !important;
    color: #000000 !important;
    border-color: rgb(168 85 247) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-5 {
    background-color: rgb(240 253 250) !important;
    color: #000000 !important;
    border-color: rgb(20 184 166) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-6 {
    background-color: rgb(255 247 237) !important;
    color: #000000 !important;
    border-color: rgb(249 115 22) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-7 {
    background-color: rgb(254 242 242) !important;
    color: #000000 !important;
    border-color: rgb(239 68 68) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-8 {
    background-color: rgb(253 242 248) !important;
    color: #000000 !important;
    border-color: rgb(236 72 153) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-9 {
    background-color: rgb(238 242 255) !important;
    color: #000000 !important;
    border-color: rgb(99 102 241) !important;
    border-left: 5px solid;
}

.card-header-custom.card-header-bg-10 {
    background-color: rgb(249 250 251) !important;
    color: #000000 !important;
    border-color: rgb(75 85 99) !important;
    border-left: 5px solid;
}

/* card 收合 */
.collapse-card-header.collapsed .ti-chevron-up{
    transform: rotate(90deg);
    transition: transform 0.3s;
}

.collapse-card-header:not(.collapsed) .ti-chevron-up{
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.normal-width-input {
    width: 120px;
}

.small-width-input {
    width: 80px;
}

.normal-width-select {
    min-width: 100px;
}

/* input[type="number"] {
    text-align: right;
} */

.form-label-control {
    display: block;
    width: 100%;
    padding: .426rem .9375rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.625;
    color: #444050;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 必填星號 */
.form-label.required:after {
    content: "*";
    color: red;
    position: absolute;
}

.col-form-label.required:after {
    content: "*";
    color: red;
    position: absolute;
}

/* 小版 select */
/*  bootstrap-select */
.bootstrap-select.select-control-sm .dropdown-toggle {
    padding: .317rem .875rem .317rem .875rem;
}

.bootstrap-select.select-control-sm .dropdown-toggle .filter-option-inner-inner {
    line-height: 1.375;
    font-size: .8125rem;
}

/* 清單查詢列 */
@media (min-width: 576px) {
    .index-inline-query {
        display: flex;
    }

    .index-inline-query-block {
        margin-right: 0.5rem;
    }
}

.index-inline-query {
    justify-content: flex-end;
}

.index-inline-query-block {
    display: inline-block;
    margin-top: 0.5rem;
}

/* form-disabled 的 class 在 disable 狀態下不要灰色顯示*/
input:not([type="checkbox"]):not([type="radio"]).form-disabled {
    pointer-events: none;
    background-color: #f9f9f9 !important;
    color: #444050 !important;
}

select.form-disabled {
    pointer-events: none;
    background-color: #f9f9f9 !important;
    color: #444050 !important;
}

textarea.form-disabled {
    pointer-events: none;
    background-color: #f9f9f9 !important;
    color: #444050 !important;
}

input[type="checkbox"].form-disabled{
    opacity: 1 !important;
}

input[type="radio"].form-disabled{
    opacity: 1 !important;
}

input[type="checkbox"].form-disabled ~.form-check-label{
    opacity: 1 !important;
}

input[type="radio"].form-disabled ~.form-check-label{
    opacity: 1 !important;
}

.select2.form-disabled + .select2-container .select2-selection--single {
    pointer-events: none;
    background-color: #f9f9f9 !important;
}
.select2.form-disabled + .select2-container .select2-selection--single .select2-selection__rendered {
    pointer-events: none;
    color: #444050 !important;
}

/* 自定義class */

/* 表格自定義class */
.table-action-col {
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-align: center !important;
    max-width: 120px;
}

.table-medium-padding th, .table-medium-padding td {
    padding: 10px !important;
}

.table-small-padding th, .table-small-padding td {
    padding: 10px 5px !important;
}

.table-full-bordered th, .table-full-bordered td {
    border: 1px solid #000000 !important;
}

.table-fixed-layout {
    table-layout: fixed;
    width: max-content;
}

.table-btn-col {
    width: 1%;
    text-wrap: nowrap;
}

/* 表格標題自定義class */
.table-title {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid #3498db;
    position: relative;
}

.table-title::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #e74c3c;
}

/* 不同主題色彩 */
.table-title.theme-blue {
    color: #2980b9;
    border-bottom-color: #3498db;
}

.table-title.theme-green {
    color: #27ae60;
    border-bottom-color: #2ecc71;
}

.table-title.theme-green::before {
    background: #27ae60;
}

@media (max-width: 768px) {
    .table-title {
        font-size: 20px;
    }
}

/* border 自定義class */
.border-color-black {
    border-color: #000000 !important;
}

.border-color-black thead{
    border-color: #000000 !important;
}

/* Radio Button 樣式美化 */
.radio-group {
    display: flex;
    gap: 2rem;
    margin-top: 0;
}
.radio-option {
    position: relative;
}
.radio-option input[type="radio"] {
    opacity: 0;
    position: absolute;
}
.radio-option label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 25px;
    transition: all 0.3s ease;
    background: white;
}
.radio-option label:before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: all 0.3s ease;
}
.radio-option input[type="radio"]:checked + label {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}
.radio-option input[type="radio"]:checked + label:before {
    border-color: #28a745;
    background: #28a745;
    box-shadow: inset 0 0 0 3px white;
}

.radio-option input[type="radio"].form-disabled{
    opacity: 0 !important;
}

/* width 自定義class */
.width-fit-content {
  width: fit-content;
}

.width-auto {
    width: auto;
}

.width-1 {
    width: 1%;
}

.width-50p {
    width: 50px;
}

.width-75p {
    width: 75px;
}

.width-100p {
    width: 100px;
}

.width-125p {
    width: 125px;
}

.width-150p {
    width: 150px;
}

.width-200p {
    width: 200px;
}

.width-300p {
    width: 300px;
}

.width-400p {
    width: 400px;
}

.min-width-0 {
  min-width: 0;
}

.min-width-100p {
    min-width: 100px;
}

.min-width-125p {
    min-width: 125px;
}

.min-width-150p {
    min-width: 150px;
}

.min-width-200p {
    min-width: 200px;
}

.min-width-300p {
    min-width: 300px;
}

.min-width-400p {
    min-width: 400px;
}

.max-width-100p {
    max-width: 100px;
}

.max-width-150p {
    max-width: 150px;
}

.max-width-200p {
    max-width: 200px;
}

.max-width-300p {
    max-width: 300px;
}

.max-width-400p {
    max-width: 400px;
}


/* 其他自訂class */
.d-flex-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.line-height-1 {
    line-height: 1;
}

@media (min-width: 576px) {
    .text-sm-nowrap {
        white-space: nowrap !important
    }
}

.height-fit-content {
    height: fit-content;
}

.no-background {
    background-color: transparent;
    background-image: none;
}

.single-line-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}