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;
}


/* 手機版選單預設以「縮起」狀態呈現 */
/* 不使用 display:none，保留元素在排版內，才能讓 style.css 的 .side-menu.left { transition: all 0.2s } 在首次開啟時也能正確滑動；同時 margin-left:-75px + width:50px 會把整個選單推離畫面左側，達到等同隱藏的效果 */
/* 以 .forced 作為「使用者已手動切換」的判斷標記，因為 #wrapper.enlarged 可能在頁面載入時才由 jquery.app.js 的 changeptype() 加上，若用 :not(.enlarged) 判定會在 JS 尚未執行前先以展開狀態 paint 出來再滑動收起 */
@media only screen and (min-width: 1px) and (max-width: 767px) {
    .side-menu.left {
        margin-left: -75px;
        width: 50px;
    }
    #wrapper.forced:not(.enlarged) .side-menu.left {
        margin-left: 0;
        width: 220px;
    }
}


.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,
textarea::-webkit-input-placeholder {
    color:#bbbbbb !important;}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color:#bbbbbb !important;}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color:#bbbbbb !important;}
input:-ms-input-placeholder,
textarea:-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;
}

/* 搜尋列 input / select 統一最小寬度 */
/* 需以 .search-float .input-group > .form-control（3 classes）才能壓過 Bootstrap 的 .input-group > .form-control { min-width: 0 }（2 classes） */
/* 否則 input 會退回瀏覽器預設約 180px，select 會縮成最長選項寬度（例如「全部」僅約 54px），兩者寬度不一致 */
.search-float .input-group > .form-control {
    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;
    }
}

/* 縮合選單時隱藏群組標題尾端的展開/收合 icon */
/* style.css 既有規則 #wrapper.enlarged .left.side-menu span.pull-right 採 Bootstrap3 命名, 本專案版型已改為 Bootstrap5 的 .float-end, 故此處補上對應規則, 否則縮合模式仍會看到 icon-minus / icon-plus */
#wrapper.enlarged .left.side-menu span.float-end {
    display: none !important;
}

/* 縮合選單下的 hover 飛出子選單 */
/* style.css 既有 #wrapper.enlarged ... ul > li:hover > ul { display: block; ... } 設定為飛出, 但若子選單元素帶有 inline style="display:block" 會在非 hover 時也保持可見並破壞排版 */
/* base.js 已於 DOMReady 與 .open-left 切換時對 enlarged 狀態避免寫入 inline display, 這裡額外用 !important 保險, 確保非 hover 時必定收回 */
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul {
    display: none !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul {
    display: block !important;
}

/* 縮合模式下點擊群組標題的飛出顯示 */
/* :hover 規則對觸控裝置或單純以點擊操作的使用者無法觸發, 此處鏡射 hover 樣式到 .flyout-open 類別, 由 base.js 於點擊時切換 */
/* 樣式來源對應 style.css 第 1218、1225、1232、1244 行的 :hover 規則 */
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li.flyout-open > a {
    background: #317eeb !important;
    color: #ffffff;
    position: relative;
    width: 240px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li.flyout-open > ul {
    display: block !important;
    left: 50px;
    position: absolute;
    width: 190px;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li.flyout-open > ul a {
    background: #ffffff;
    border-left: 3px solid #edf0f0;
    box-shadow: none;
    padding-left: 15px;
    position: relative;
    width: 190px;
    z-index: 6;
}

#wrapper.enlarged .left.side-menu #sidebar-menu ul > li.flyout-open a span {
    display: inline;
}

/* 縮合模式下, 點擊「第二層 has_sub」(三層選單的中間層) 觸發 .flyout-open 時, 第三層 ul 應飛出至「第二層子選單右側」而非從側邊主選單右側 */
/* 既有規則 #sidebar-menu ul > li.flyout-open > ul { left: 50px } 是給「第一層 has_sub」用 (50px = 縮合主選單寬度); 套到第二層會錯位顯示在主選單上方 */
/* 此規則 selector 多一層 ul, 提高 specificity 覆寫位置, 與 style.css 1252 行 hover 模式 (`ul ul li:hover > ul { left:190px; margin-top:-36px }`) 對齊, 確保「點擊」與「滑鼠移過」兩種互動的飛出位置一致 */
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul > li.flyout-open > ul {
    left: 190px;
    margin-top: -36px;
}

/* 縮合模式下, 飛出選單中第二層 has_sub 連結右側顯示 ▶ chevron 提示「還有第三層」 */
/* 加減號圖示在縮合模式下已被 #wrapper.enlarged span.float-end { display: none } 隱藏 (主選單只剩 icon, 沒展開/收合的概念), 因此改以 ::after 偽元素呈現箭頭, 不依賴 .float-end 元素 */
/* 字元 \e06f 對應 lucide.css 中 .icon-chevron-right; 直接寫死字元而非加 i 元素, 避免動到 blade 範本與既有展開/收合 icon 邏輯 */
#wrapper.enlarged .left.side-menu #sidebar-menu ul ul > li.has_sub > a::after {
    font-family: 'lucide';
    content: "\e06f";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #75798B;
}

/* 第二層 has_sub 的 .float-end 加減號 icon 對齊 a 文字垂直中線 */
/* style.css 1129 行 #sidebar-menu ul ul a 為 padding 10px 25px 10px 65px, 預設 .float-end 浮動到右邊但行高與 i 字體大小 (16px !important) 會略微偏上, 補上 line-height 讓加減號與「Menu Level 1.1」文字置中對齊 */
#sidebar-menu ul ul > li.has_sub > a > .float-end {
    line-height: inherit;
}

/* 分隔線 */
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;
}

/* 手機版 navbar 右上角已有選單開關按鈕（.mobile_show .button-menu-header），選單內部的開關按鈕在手機版即為多餘，隱藏避免干擾 */
@media only screen and (min-width: 1px) and (max-width: 767px) {
    .menu-bars {
        display: none !important;
    }
}

.manage-btn-box {
    padding: 4px 8px 4px 8px;
    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: 19px;
    top: 5px;
    right: 30px;
    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;
}

.tag-primary::before {
    background-color: #d7e6fc;
    border: 2px solid #aaccff;
}

/* 對應 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: #77b0c5;
}
.tag-info::before {
    border-color: #a3d5e8;
    background-color: #d4ecf5;
}

/* 對應 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;
    }
}

/* 側邊選單全尺寸獨立捲軸，不與主內容一起捲動 */
/* 原本 style.css 的 body.fixed-left .side-menu.left { position:fixed } 只在桌機（>990px）生效；平板（768–990px）被 jquery.app.js 切成 fixed-left-void 後選單退回 position:absolute 而跟內容同步捲動；另外 slimScroll 與 jquery.app.js 的 toggle_slimscroll() 會以 inline style 注入固定 height 與 overflow，桌機視窗高度縮小時選單內容會被截掉卻無法自行捲動 */
.side-menu.left {
    position: fixed !important;            /* 任何尺寸都釘在視窗，避免隨主內容一起捲動 */
    top: 65px !important;                  /* 避開頂部 topbar */
    bottom: 0 !important;                  /* 由 top/bottom 自動決定高度，隨視窗即時伸縮；需 !important 以壓過 body.fixed-left .side-menu.left 原設定的 bottom:50px */
    height: auto !important;               /* 覆寫原 body.fixed-left 的 height:100% 以免超出視窗底部 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* slimScroll 會在 .sidebar-inner 外再包一層 .slimScrollDiv，兩層都要覆寫高度與 overflow，否則 slimScroll 與 toggle_slimscroll 注入的 inline style（height/overflow）會壓過本層 CSS */
.side-menu.left .slimScrollDiv,
.side-menu.left .sidebar-inner {
    height: 100% !important;
    overflow-y: auto !important;           /* 內容過長時於選單區域出現原生捲軸，與右側主內容互不影響 */
}

/* 縮合選單模式下需放行 overflow, 否則飛出子選單會被裁切 */
/* CSS 規範: 元素任一軸 overflow 為非 visible 時, 另一軸的 visible 會升為 auto, 因此上方規則的 overflow-y:auto 會連帶讓 overflow-x 也以 auto 計算 */
/* 縮合模式下子選單以絕對定位 (position:absolute; left:50px) 向右飛出, 父層若不是 overflow:visible 會使飛出元素被剪裁而看不到 */
/* 縮合模式下選單只剩 icon (約 50px 高度), 整體高度需求低, 多數情境不需要垂直捲動, 改為 visible 影響不大; 且 jquery.app.js 的 toggle_slimscroll() 在 enlarged 時也會試圖把 overflow 設回 inherit, 此處與該行為一致 */
#wrapper.enlarged .side-menu.left .slimScrollDiv,
#wrapper.enlarged .side-menu.left .sidebar-inner {
    overflow: visible !important;
}
/* 改用原生捲軸，隱藏 slimScroll 的自訂捲軸條與軌道，避免與原生捲軸重疊 */
.side-menu.left .slimScrollBar,
.side-menu.left .slimScrollRail {
    display: none !important;
}

/* 平板尺寸（768–990px）預載入縮小版選單，避免重新整理瞬間先顯示展開樣式再被 JS 收縮造成閃爍 */
/* #wrapper.enlarged 是 jquery.app.js 的 changeptype() 於 DOMContentLoaded 後才會加上；這裡以媒體查詢讓瀏覽器首次繪製時視覺就是縮小狀態 */
/* 使用 #wrapper:not(.forced) 限制僅在使用者尚未手動切換時套用；點擊「選單開合按鈕」會在 #wrapper 加上 .forced，此時交還原本切換邏輯，不阻擋展開 */
@media (min-width: 768px) and (max-width: 990px) {
    #wrapper:not(.forced) .left.side-menu {
        width: 50px;
        z-index: 5;
    }
    #wrapper:not(.forced) .content-page {
        margin-left: 50px;                 /* 主內容區配合縮小選單，左邊距同樣縮為 50px */
    }
    #wrapper:not(.forced) .footer {
        left: 50px;                        /* 頁尾左邊距同步縮小，避免壓到選單 */
    }
}

.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;
}

/* 手機版時，允許按鈕與說明文字換行，避免說明文字超出容器寬度 */
@media only screen and (max-width: 767px) {
    .image_box .form-group.row,
    .file_box .form-group.row,
    .file_path_box .form-group.row {
        flex-wrap: wrap; /* 允許子元素換行 */
        align-items: flex-start; /* 換行後對齊頂端 */
    }

    .image_box .form-group.row .text-secondary,
    .file_box .form-group.row .text-secondary,
    .file_path_box .form-group.row .text-secondary {
        white-space: normal; /* 文字允許自然換行 */
        word-break: break-word; /* 長字串可在必要時斷行 */
    }
}

.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: .65rem;
    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;
}

/* ========================================
   bootstrap-timepicker 彈出面板調整
   套件原始 CSS 將小時／分鐘輸入框寬度寫死為 25px，
   手機瀏覽器在原生表單樣式下會有較大 padding，造成兩位數字被截斷只露出十位數。
   此處放寬寬度並補上最小觸擊尺寸，確保 HH／MM 完整顯示並維持易點擊。
   ======================================== */
.bootstrap-timepicker-widget table td input {
    width: 40px;              /* 覆寫原本 25px，兩位數字在手機也能完整顯示 */
    min-width: 40px;
    height: 30px;             /* 與相鄰上下箭頭 <a> 的視覺高度對齊 */
    padding: 2px 4px;         /* 控制內邊距，避免套用瀏覽器原生輸入框 padding 造成數字再次被擠壓 */
    font-size: 14px;          /* 固定字級，避免 iOS Safari 自動放大字體造成視覺錯位 */
    line-height: 1;
}

/* 手機版 navbar 右上角使用者下拉選單，離右邊緣的視覺間距 */
@media (max-width: 767px) {
    .topbar .navbar-right .dropdown-menu-end {
        margin-right: 8px;
    }
}