td {
    vertical-align: middle !important;
}



@media only screen and (min-width: 1px) and (max-width: 767px) {
    .mobile-100 {
        width:100% !important;
    }

    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* 表格標題旁sort */
th .fa-sort {
    /*float: right;*/
    padding-left: 5px;
    cursor: pointer;
    color: #d1d1d1;
}
th .fa-sort:hover {
    color: #585858;
}

th {
    word-break: keep-all;white-space:nowrap;
}


@media only screen and (min-width: 1px) and (max-width: 990px) {
    th .fa-sort{
        float: none;
        padding-left: 5px;
    }
}

/* 內頁表單寬度 */
.form-card-box {
    max-width:1360px;
    margin: auto;
    padding:0px !important;
}


/* 解掉手機版一開始選單會跑出來的問題 */
@media only screen and (min-width: 1px) and (max-width: 767px) {
    .side-menu {
        display: none;
    }
}


.footer {
    min-height:62px;
}


.pointer {
    cursor:pointer
}


.card-footer {
    border-top: 1px solid rgb(236, 236, 236) !important;
}

.card-header {
    border-bottom: 1px solid rgb(236, 236, 236) !important;
}

/* 輸入框最大長度 */
.input-max {
    max-width:800px;
}
/* 檔案上傳框最大長度 */
.file-input-max {
    max-width: 724px;
}
/* 數字欄位最大長度 */
.number-input-max {
    max-width: 730px;
}

/* 數字欄位加減按鈕 */
.btn-number {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    box-shadow: none;
}


/* 欄位可以輸入時的背景顏色 */
.form-control {
    border-radius:0px;
    background-color: #FFF;
    border: 1px solid #d2d6de;
}

.form-control:focus {
    background-color: #FFF ;
}

/* 欄位禁止輸入時的背景顏色 */
.form-control:disabled, .form-control[readonly] {
    background-color: #eeeeee;
    color: rgba(0, 0, 0, 0.6);
}
.form-control:disabled:focus, .form-control[readonly]:focus {
    background-color: #eeeeee;
    color: rgba(0, 0, 0, 0.6);
}

/* 禁止輸入時隱藏按鈕 */
button:disabled {
    display: none !important;
}


/* 隱藏 */
.displaynone {
    display: none;
}

.modal .card-header {
    border-radius: 0px;
}

/* 輸入框說明字體顏色 */
input::-webkit-input-placeholder {
    color:#bbbbbb !important;}
input:-moz-placeholder {
    color:#bbbbbb !important;}
input::-moz-placeholder {
    color:#bbbbbb !important;}
input:-ms-input-placeholder {
    color:#bbbbbb !important;}



.select2-container {
    max-width:800px;
    border-radius: 0px !important;
    min-height: 36px !important;
}

.select2-selection--single {
    border-radius: 0px !important;
    height: 36px !important;
}

.select2-selection__arrow b {
    display: none;
}

.select2-container .select2-selection--multiple {
    border: 1px solid #d2d6de !important;
    border-radius:0px;

}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    border-radius: 0px;
    /*background-color: red;*/
}


#wrapper.enlarged .left.side-menu {
    padding: 0px;
}







@media only screen and (min-width: 1px) and (max-width: 768px) {
    .search-float {
        width:100%;
    }
}

.search-float .input-group-text {
    padding-top: 5px;
    padding-bottom: 4px;
    color: #666666;
    font-size: 15px;
    border-color: #dee2e6;
    background-color: #f8f8f8;
    border-radius: 3px;
    height: 36px;                       /* 與同列 input / select2 高度一致 */
    align-items: center;                /* Bootstrap 已設 display:flex，這裡補上垂直置中避免被 padding 影響 */
    line-height: 1;                     /* 避免 font-size 15px 的預設 line-height 把文字撐超出 36px */
}

/* .input-group-prepend 為 flex 子項，需顯式 flex 讓內部 .input-group-text 能等高撐滿 */
.search-float .input-group-prepend {
    display: flex;
}

.search-float .form-control {
    border-color: #dee2e6;
    background-color: #FFF;
    height: 36px;
    border-radius: 3px;
}


.search-float .select2-container {
    flex: 1 1 auto;
    width: 1% !important;

}

.select2-selection__rendered{
    color: rgba(0, 0, 0, 0.6) !important;
}

.search-float button {
    background-color: #f8f8f8;
    border-color: #dee2e6;
    padding-bottom: 7px;
    box-shadow: none;
    border-radius: 3px !important;
    margin-bottom: 1rem!important;
}



.search-float .select2-container, .group .select2-container{
    width: auto !important;
    border-radius: 0px !important;
    height: 36px !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #d2d6de !important;
}


.search-float .select2-selection--single, .search-float select {
    border-radius: 0px 3px 3px 0 !important;
    height: 36px !important;
    min-width: 180px;
}

.search-float .select2-selection__arrow b {
    display: none;
}

.search-float input {
    min-width: 180px;
}

select {
    border: solid 1px #000;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    padding-right: 14px;
}

select::-ms-expand {
    display: none;
}



/* 表單錯誤 */
.input_error {
    border: 1px solid #ef5350 !important;
}
.error {
    color: #ef5350;
}

.select2-container--default .select2-selection--single.input_error {
    border: 1px solid #ef5350 !important;
}



/* 手機版統一搜尋標題寬 */
@media only screen and (min-width: 1px) and (max-width: 768px) {
    .search-float .input-group-text{
        min-width: 86px;
    }
}


/* icon大小 */
i {
    font-size: 16px !important;
}

/* 分頁圓角 */
.pagination a {
    border-radius: 0px !important;
}


/* 列表card footer 文字 */
.list_card_footer_text {
    color: #797979;
    margin: 2px 0 3px 0;
}
.list_card_footer_text span{
    font-weight: 600;
    padding:0 6px;
}

.list_card_footer_text select{
    padding-left: 15px;
    border-color: #b9b8b8;
    color: #797979;
    margin:0 5px;
    border-radius:0px;
    font-weight: 600;
}

.icon404 {
    font-size: 55px !important;
}



/* 編輯器 */
.cke_toolgroup, .cke_combo_button {
    border-radius:0px !important;
}
.cke_top {
    background-image: none !important;
    background: #f8f8f8 !important;
    border-bottom: 1px solid #d2d6de !important;
}

.cke_chrome {
    box-shadow:none !important;
    border: 1px solid #d2d6de !important;
}

.cke_bottom {
    border-top: 1px solid #d2d6de !important;
    background: #f8f8f8 !important;
    background-image: none !important;
}

textarea.ckeditor {
    height: 700px;
    visibility: collapse
}


/* 開關 */
.toggle-on {
    padding: 6px 9px 0 0px !important;
}

.toggle-off {
    padding: 7px 0px 0 7px !important;
}

.active_checkbox {
    display: none;
}

.hot_checkbox {
    display: none;
}

@media only screen and (min-width: 768px) {
    .mobile_show {
        display: none;
    }
}
@media only screen and (min-width: 1px) and (max-width: 767px) {
    .pc_show {
        display: none !important;
    }
}

/* 上傳檔案 */
.file-border {
    background-color: #f7f7f7;
    border-radius: 0px;
    position: relative;
    border: 1px solid #dee2e6;
    padding:.25rem;
    text-align: left;
}

.file-del-btn {
    /*position:absolute;*/
    /*right: 5px;*/
    display: none;
}

.file-download-btn {
    /*position:absolute;*/
    /*right: 48px;*/
    display: none;
}

.file-box:hover .file-del-btn,.file-box:hover .file-download-btn,
.file-info:hover .file-del-btn,.file-info:hover .file-download-btn{
    display:inline-block;
}

.file-border .input-group-append, .img-border .input-group-append {
    border: 1px solid #d2d6de;
}
.file-border .input-group-text, .img-border .input-group-text {
    font-size: 12px;
}

/* 上傳圖片 */
.image-box:hover .img-del-btn{
    display:block;
}

.img-border {
    background-color: #f7f7f7;
    border-radius: 0px;
    position: relative;
    text-align: center!important;
}

.img-border img {
    max-width: 100%;
    width: auto;
}

.img-del-btn{
    display: none;
    position: absolute;
    right: 10px;
    top: 5px;
}

/* 拖拉時隱藏下一層 */
.sortable-ghost .img-border, .sortable-ghost .file-border{
    opacity: 0;
    border-color: red;
}

/* 拖拉時原本位子的css */
.sortable-ghost {
    border-width: 2px;
    border-color: #d2d6de;
    border-style: dotted;
}

/* 拖拉時不要呈現透明 */
.sortable-fallback {
    opacity: 1 !important;
}

.sortable_box .item {
    cursor: move;
}

/* 日期選擇器 */
.datepicker-days .active, .datepicker-months .active, .datepicker-years .active{
    background-image: none !important;
    background-color: #357ebd !important;
}

.datepicker-days .day{
    min-width: 32px;
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px !important;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.datepicker-days .dow {
    width: 32px;
    height: 24px;
    line-height: 24px;
    font-size: 12px !important;
}

.datepicker-months, datepicker-years {
    width: 224px;
    height: 269px;
}
.datepicker-months .table-condensed, .datepicker-years .table-condensed {
    width: 100%;
    height: 100%;
}

/* 選單 */
.subdrop ~ .list-unstyled{
    display: block !important;
}

@media only screen and (min-width: 769px) and (max-width: 990px) {
    .enlarged .subdrop ~ .list-unstyled{
        display: none !important;
    }
}

/* 分隔線 */
form hr{
    height: 1px;
    border: none;
    background-color: #8db1e2;
}

#form .card-footer {
    min-height: 56px;
}

.number-plus, .number-less {
    border-radius:0px;
    width: 38px;
}

#paginate_qty {
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
}

.subdrop_bk {
    background-color: #ffffff;
}

.file-box-loading {
    position: absolute;
    margin-left: 40%;
}

.ion-icon {
    font-size: 18px !important;
}

.md {
    font-size: 20px !important;
}

/* 警告視窗要在最上面 */
.swal2-container {
    z-index: 99999;
}

.cke_dialog_ui_hbox_first {
    /*display: none;*/
}

.cke_dialog .ImagePreviewBox {
    width: 410px !important;
}

.cke_reset_all, .cke_reset_all *, .cke_reset_all a, .cke_reset_all textarea {
    width: 100%;
}

/* 民國日期輸入 */
.roc-date .input-group-text {
    font-size: 14px;
    border-radius: 0px;
    border-color: #d2d6de;
}

.roc-date input {
    border-right-color: #FFF;

}

/* 群組輸入欄位 */
.group .input-group-text {
    font-size: 14px;
    border-radius: 0px;
    border-color: #d2d6de;
}

.datepicker-dropdown {
    z-index: 999 !important;
}


/** 自定義的group */
.project-group .input-group-text {
    font-size: 14px;
    border-radius: 0px;
    border-color: #d2d6de;
}

.project-group input {
    border-right-color: #FFF;

}


.project-group input:last-child
{
    border-right-color: #d2d6de;
}

.card {
    border-radius: 10px;
}

.card-header {
    border-radius: 0px 0px 10px 10px;
}

.card-footer {
    border-radius: 0px 0px 10px 10px;
}

.btn {
    border-radius: 3px;
}

.content-page-header button{
    margin-left: 8px;
}

.form-control {
    border-radius: 3px;
}


.select2-selection {
    border-radius: 3px !important;
}

.page-item:last-child a{
    border-radius: 0px 3px 3px 0px !important;
}
.page-item:first-child a  {
    border-radius: 3px 0px 0px 3px !important;
}

.modal-content {
    border-radius: 5px 5px 5px 5px !important;
}

.modal-content .card-header {
    border-radius: 5px 5px 0px 0px !important;
}

.topbar img {
    max-height: 40px;
    max-width: 160%;
}

.roc-date input:last-child {
    border-right-color: #d2d6de;
}

.checkbox label {
    cursor: pointer;
}

.checkbox.readonly label, .checkbox.readonly input {
    cursor: no-drop;

}

.checkbox.readonly label {
    opacity: 0.65;
}

/* 凍結操作列 */
.manage_th, .manage_td {
    position:sticky;
    right:0px;
    background-color: #ffffff;
}

.manage_th, .manage_td {
    min-width: 130px !important;
    text-align: right !important;
}

/* 手機版操作列縮小 */
@media only screen and (min-width: 1px) and (max-width: 767px) {
    .manage_td a.detail {
        display: none;
    }

    .table-responsive {
        overflow-x: auto !important;
    }

    .manage_th, .manage_td {
        min-width: 70px !important;
    }
}

.manage_td .dropdown-item {
    cursor: pointer;
}

.dropdown-toggle::after {
    border-width: 0px;
}

.menu-bars {
    display: block !important;
}

.manage-btn-box {
    padding: 6px 10px 6px 10px;
    border: 2px solid rgb(236, 236, 236) !important;
    border-radius: 7px;
    display: inline-block;
    color: #e9edf2;
    position: relative;
}

.manage-btn-box .detail::before {
    position: absolute;
    width: 2px;
    height: 24px;
    top: 4px;
    right: 36px;
    content: "";
    background-color: #ececec;
}

.manage-btn-box a {
    color: #363d4d;
    font-weight: 800;
    margin-right: 12px;
}

.manage-btn-box i {
    line-height: initial;
    cursor: pointer;
    color: #363d4d;
}

.manage-detail-btn-box {
    padding: 6px 10px 6px 10px;
    border: 2px solid rgb(236, 236, 236) !important;
    border-radius: 7px;
    display: inline-block;
    color: #e9edf2;
    position: relative;
}

.manage-detail-btn-box a {
    color: #363d4d;
    font-weight: 800;
}


.tag {
    border-width: 2px;
    border-style: solid;
    border-radius: 25px;
    display: inline-block;
    padding: 3px 10px 3px 23px;
    position: relative;
}

.tag::before {
    left: 8px;
    margin: auto;
    bottom: 9px;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: #5e5e5e;
    border: 2px solid #000000;
    border-radius: 8px;
    position: absolute;
}

.tag-active {
    border-color: #a9decc;
    color: #4fab8c;
}
.tag-active::before {
    border-color: #a9decc;
    background-color: #deede9;
}

.tag-inactive {
    border-color: #d3dde6;
    color: #7a8499;
}
.tag-inactive::before {
    border-color: #d3dde6;
    background-color: #e6eaf0;
}

/* 對應 Bootstrap warning 黃色標籤 */
.tag-warning {
    border-color: #f6cc7a;
    color: #e5b75e;
}
.tag-warning::before {
    border-color: #f6cc7a;
    background-color: #e5b75e;
}

/* 對應 Bootstrap info 青色標籤 */
.tag-info {
    border-color: #a3d5e8;
    color: #5790a5;
}
.tag-info::before {
    border-color: #a3d5e8;
    background-color: #5790a5;
}

/* 對應 Bootstrap primary 藍色標籤 */
.tag-primary {
    border-color: #a3c4f3;
    color: #5d92de;
}
.tag-warning::before {
    border-color: #ffe0a3;
    background-color: #fff3cd;
}

/* 對應 Bootstrap success 綠色標籤 */
.tag-success {
    border-color: #a3cfbb;
    color: #3d966d;
}
.tag-success::before {
    border-color: #a3cfbb;
    background-color: #d1e7dd;
}

/* 對應 Bootstrap secondary 灰色標籤 */
.tag-secondary {
    border-color: #c4c8cc;
    color: #6c757d;
}
.tag-secondary::before {
    border-color: #c4c8cc;
    background-color: #e2e3e5;
}







.dropdown-item:hover {
    cursor: pointer;
}

.dropdown-item:active  span {
    color: #fff !important;
}

@media only screen and (min-width: 1px) and (max-width: 767px) {
    .side-menu {
        position: fixed !important;
    }

    .slimscrollleft {
        overflow-y: auto !important;
    }
}

.tag {
    white-space: nowrap;
}


/* BS Update */

.dropdown-bs-item:active  span {
    color: #fff !important;
}

.dropdown-bs-item:hover {
    background-color: #f8f9fa;
}

.manage_td .dropdown-bs-item {
    cursor: pointer;
}

.search-float .input-group-text {
    padding-bottom: 6px !important;
}

.content-page-header .float-end {
    padding-top: 16px;
}

a {
    text-decoration: none;
}

.dropdown-bs-item {
    display: block;
    padding-left: 20px;
    margin: 3px 0px;
}

.dropdown-bs-item:hover {
    background-color: #f8f9fa;
}

.button-menu-left {
    color: #212529 
}

.button-menu-header {
    padding: 0px 15px;
    color: #212529 
}

form .form-group {
    margin-bottom: 16px;
}

.uploadImageAry, .uploadImage, .uploadFileAry, .uploadFilePath {
    width: auto;
    display: inline-block !important;
}

.text-secondary {
    display: inline-block !important;
}

/* 檔案上傳按鈕與說明文字保持同一行 */
.image_box .form-group.row,
.file_box .form-group.row,
.file_path_box .form-group.row {
    flex-wrap: nowrap;
    align-items: center;
}

/* 檔案上傳說明文字寬度依內容自動調整 */
.image_box .form-group.row .text-secondary,
.file_box .form-group.row .text-secondary,
.file_path_box .form-group.row .text-secondary {
    width: auto;
    white-space: nowrap;
}

.search-float .pull-left, .search-float button {
    margin-right: 0.25rem;
    margin-bottom: 1rem;
}

input.form-control, .select2-selection__rendered {
    height: 38px;
}

.content-page-header button i {
    padding-right: .5rem !important;
}

.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
}

.pagination .page-link {
  white-space: normal;
  overflow-wrap: break-word;
  margin-bottom: 5px;;
}

.content-page-header.active {
    padding-bottom: 20px;
}

.content-page-header.active .float-end button {
    margin-bottom: 5px;;
}

.roc-date span {
    background-color: #e9ecef;
}

.roc-date span:first-child {
    border-radius: 3px 0px 0px 3px;
}

.form-check label {
    font-weight: 400;
}

.form-check-input {
    width: 16px;
    height: 16px;
    margin-right: 8px;;
}

.dropdown-menu > li > a {
	cursor: pointer !important;
}

.table td, .table th {
    padding: .75rem;
    border-top: 1px solid #dee2e6;
}

th, td {
    color: #666666 !important;
}

.input-group button:hover {
    background-color: #e9ecef !important;
    border-color: #c8c8c8 !important;
}

.search-float button:hover {
    background-color: #f4f4f4 !important;
    border-color: #d5d5d5 !important;
}

/* BS Update End */

/* 響應式表格卡片模式：需在外層加上 .mobile-card-mode 才會啟用 */
/* 外層容器：確保桌面版可橫向捲動 */
.mobile-card-mode {
    width: 100%;
    overflow-x: auto;
}

/* 桌面版隱藏卡片標題 */
.mobile-card-mode .table tbody td .mobile-card-label {
    display: none;
}

/* 手機版時將表格轉換為卡片式呈現，僅在有 .mobile-card-mode 時生效 */
@media only screen and (max-width: 767px) {
    /* 隱藏表格標題列 */
    .mobile-card-mode .table thead {
        display: none;
    }

    /* 將每個 tr 轉換為獨立卡片 */
    .mobile-card-mode .table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 15px;
        background-color: #fff;
    }

    /* 將每個 td 轉換為一列 */
    .mobile-card-mode .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right !important;
    }

    /* 最後一個 td 不需要底線 */
    .mobile-card-mode .table tbody td:last-child {
        border-bottom: none;
    }

    /* 欄位標題樣式：由 JS 動態產生 .mobile-card-label 元素，手機版才顯示 */
    .mobile-card-mode .table tbody td .mobile-card-label {
        display: block;
        font-weight: 600;
        color: #666666;
        font-size: 14px;
        text-align: left;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* 手機版操作欄位樣式調整 */
    .mobile-card-mode .table .manage_td {
        position: static;
        justify-content: space-between;
        padding-top: 12px;
        margin-top: 5px;
    }

    /* 手機版操作按鈕置中 */
    .mobile-card-mode .table .manage_td .manage-btn-box {
        margin-left: auto;
    }
}

.card-header {
    font-weight: 500;
}

.item-row {
    background-color: #f3f3f3;
}

.btn-remove-icon {
    top: 10px;
    right: 20px;
    font-size: 18px;
    cursor: pointer;
}

.btn-remove-icon:hover {
    color: #dc3545 !important;
}

.text-grey {
    color: #b9b9b9 !important;
}

/* select2 預設提示文字（disabled placeholder）顯示灰色 */
/* 採用 title 屬性比對：select2 會將目前選取選項的文字寫入 .select2-selection__rendered 的 title，因此可用前綴選擇器辨識「請選擇xxx」的預設提示 */
.select2-container--default .select2-selection--single .select2-selection__rendered[title^="請選擇"] {
    color: #bbbbbb !important;
}

/* select2 的 placeholder 文字顏色（適用於有設定 placeholder 選項的 ajax 下拉，例如客戶、機型搜尋） */
/* select2 在未選取時會產生 .select2-selection__placeholder 元素，需另外指定顏色，避免被 .select2-selection__rendered 的深色規則覆蓋 */
.select2-container--default .select2-selection__placeholder {
    color: #bbbbbb !important;
}

/* .checkbox 勾選後的勾勾圖示 */
.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'lucide' !important;
    content: "\e06c" !important;
    font-size: 13px;
    line-height: 16px;
    padding-top: 0;
    padding-left: 2px;
}