/**高度**/
.height_100{
    height: 100px;
}
.height_200{
    height: 200px;
}
.height_300{
    height: 300px;
}
.height_400{
    height: 400px;
}
.height_500{
    height: 500px;
}
.height_600{
    height: 600px;
}
.height_700{
    height: 700px;
}
.height_800{
    height: 800px;
}
.height_900{
    height: 900px;
}
.height_1000{
    height: 1000px;
}

.input-80 { width: 80px; }
.input-100 { width: 100px; }
.input-120 { width: 120px; }
.input-160 { width: 160px; }
.input-180 { width: 180px; }
.input-200 { width: 200px; }
.input-220 { width: 220px; }
.input-240 { width: 240px; }
.input-260 { width: 260px; }
.input-280 { width: 280px; }
.input-300 { width: 300px; }
.input-320 { width: 320px; }
.input-340 { width: 340px; }
.input-360 { width: 360px; }
.input-380 { width: 380px; }
.input-400 { width: 400px; }
.input-420 { width: 420px; }
.input-440 { width: 440px; }
.input-460 { width: 460px; }
.input-480 { width: 480px; }
.input-500 { width: 500px; }
.input-520 { width: 520px; }
.input-540 { width: 540px; }
.input-560 { width: 560px; }
.input-580 { width: 580px; }
.input-600 { width: 600px; }


.title_style1 {
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
}

.syscolor {
    background-color: #dd8471;
    color: #fff;
}

[type=submit].syscolor:hover{
    color: #fff;
}

.edit-btn {
    display: none;
    margin: 0 auto;
}

.datagrid-wrap {
    border: 0px;
}

.datagrid-htable tr {
    background-color: #dd8471;
}

.datagrid-header-row td {
    padding: 15px 0px;
}

.datagrid-cell td {
    padding: 15px 0px;
}

.datagrid-htable tr td {
    color: #fff;
    font-weight: 600;
}

.datagrid-header td, .datagrid-body td, .datagrid-footer td {
    border-color: #dd8471;
    border-width: 0 1px 1px 0;
    border-style: dashed;
}

.datagrid-header-over {
    background-color: #dd8471 !important;
    color: #fff !important;
}

.datagrid-header .datagrid-cell span {
    font-size: 16pt;
}

.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber {
    font-size: 16pt;
}

.datagrid-row {
    border-color: #dd8471;
    border-width: 1px;
    border-style: dashed;
}

.datagrid-row td {
    padding: 10px 0px;
}

div.datagrid-cell, div.datagrid-cell-group, div.datagrid-header-rownumber, div.datagrid-cell-rownumber {
    line-height: unset;
}

.tag_items_box {
    width: 500px;
    white-space: break-spaces;
}

.showOtherButton {
    display: none;
}


/** checkbox 樣式 ***/

.datagrid-header-check, .datagrid-cell-check {
    text-align: center;
    vertical-align: middle;
}

.datagrid-header-check input[type="checkbox"], 
.datagrid-cell-check input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.datagrid-header-check, .datagrid-cell-check {
    height:unset;
}

.datagrid-header-check input[type="checkbox"] {
    /*accent-color: #dd8471;*/
    border: 2px solid #dd8471; /* 外框顏色 */
    border-radius: 4px; /* 圓角 */
    appearance: none; /* 移除瀏覽器默認樣式 */
    outline: none; /* 去掉聚焦外框 */
    cursor: pointer; /* 鼠標樣式 */
    background-color: #ffffff; /* 背景顏色 */
    position: relative; /* 為了添加打勾標誌 */
}

.datagrid-header-check input[type="checkbox"]:checked {
    background-color: #dd8471; /* 設置勾選後背景色 */
    border-color: #e3b5ab; /* 勾選時外框顏色 */
}

.datagrid-header-check input[type="checkbox"]:checked::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 0px;
    left: 5px;
    transform: rotate(45deg);
}

.datagrid-cell-check input[type="checkbox"] {
    /*accent-color: #dd8471;*/
    border: 2px solid #dd8471; /* 外框顏色 */
    border-radius: 4px; /* 圓角 */
    appearance: none; /* 移除瀏覽器默認樣式 */
    outline: none; /* 去掉聚焦外框 */
    cursor: pointer; /* 鼠標樣式 */
    background-color: #ffffff; /* 背景顏色 */
    position: relative; /* 為了添加打勾標誌 */
}

.datagrid-cell-check input[type="checkbox"]:checked {
    background-color: #dd8471; /* 設置勾選後背景色 */
    border-color: #dd8471; /* 勾選時外框顏色 */
}

.datagrid-cell-check input[type="checkbox"]:checked::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 0px;
    left: 5px;
    transform: rotate(45deg);
}

#clear_sttime, #clear_endtime {
    cursor: pointer;
}

/** X-Editable 的 cssclass **/
.custom-width {
    width: 100px !important;  /* 調整寬度，可改成你想要的值 */
}

/** 儀器設定 右邊 div **/
.equi_selectItemsBox {
    max-height: 405px; /* 限制最大高度 */
    overflow-y: auto;  /* 垂直方向顯示滾動條 */
    overflow-x: hidden; /* 隱藏橫向滾動條 */
    border: 1px solid #000; /* 添加邊框 */
    padding: 10px; /* 內邊距 */
    background: #f9f9f9; /* 背景顏色 */
    border-radius: 5px; /* 圓角 */
}

.selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #dd8471;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
    color: #fff;
}

.selected-item button {
    background: red;
    color: white;
    border: none;
    border: 1px solid #fff;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.selected-item button:hover {
    background: darkred;
}

.datagrid-btable tr:hover {
    background-color: #fbac9ba1 !important; /* 滑鼠移過時變色 */
    cursor: pointer;
}

.groupMultiplselectedItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #dd8471;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
    color: #fff;
}

.groupMultiplselectedItem button {
    background: red;
    color: white;
    border: none;
    border: 1px solid #fff;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.groupMultiplselectedItem button:hover {
    background: darkred;
}

/* 主畫面 行事曆 */
/** 行事曆容器 **/
.main_calendarformsDetail_ {
    width: 100%;
    /*max-width: 1090px;*/
    overflow: auto;
    margin: auto;
}

.empty-day {
    background: #f1f1f1;
}

/* 行事曆標題欄（星期名稱） */
.main_calendar-day-header {
    flex: 1 1 calc(14.28% - 10px); /* 7列 */
    max-width: calc(14.28% - 10px);
    text-align: center;
    font-weight: bold;
    background-color: #dd8471;
    color: white;
    border-radius: 5px;
    margin: 2px;
    padding: 10px;
}

/* 行事曆主要容器 */
#calendarotherval {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 每天的格子 */
.main_calendar-day {
    flex: 1 1 calc(14.28% - 10px); /* 7列 */
    max-width: calc(14.28% - 10px);
    /*height: 95px;*/
    height: 300px;
    border: 1px solid #dd8471;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
    transition: background 0.3s;
    box-sizing: border-box;
}

/* 每天的標題日期 */
.main_calendar-day .day-number {
    font-size: 16pt;
    font-weight: bold;
    color: #b8860b;
    background: #dcdcdc;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    /*text-align: center;*/
    margin-bottom: 5px;
}

.day-content {
    width: 100%;
    font-size: 10pt;
    padding: 0px 5px 0px 5px;
}

.day-listcontent {
    max-height: 210px; /* 設定最大高度，可自行調整 */
    overflow: hidden;
}

.day-listcontent_ul {
    max-height: 210px; /* 設定最大高度 */
    overflow-y: auto; /* 垂直超出時顯示捲軸 */
    padding-right: 5px; /* 防止滾動條壓縮內容 */
}

/* 調整小螢幕顯示 */
@media screen and (max-width: 1024px) {
    /*.main_calendar-day, .main_calendar-day-header {
        flex: 1 1 calc(15% - 10px); 
        max-width: calc(15% - 10px);
    }*/
    #calendarotherval {
        width: 1400px;
        overflow: auto;
    }
     
}

/*@media screen and (max-width: 768px) {
    .main_calendar-day, .main_calendar-day-header {
        flex: 1 1 calc(15% - 10px); 
        max-width: calc(15% - 10px);
        font-size: 10pt;
    }
    .day-number {
        font-size: 10pt !important;
    }
}

@media screen and (max-width: 480px) {
    .main_calendar-day, .main_calendar-day-header {
        flex: 1 1 calc(15% - 10px);
        max-width: calc(15% - 10px);
        font-size: 10pt;
    }
    .day-number {
        font-size: 10pt !important;
    }  
}*/

.inbox-wid .inbox-list-item {
 
    border-bottom: 1px solid #dd8471;
}

/**行事曆**/
.calendarformsDetail_, .calendarEquiformsDetail_ {
    width: 1090px;
    overflow: auto; 
}

/* 標題欄 */
.calendar-day-header {
    width: 146px;
    text-align: center;
    font-weight: bold;
    background-color: #dd8471;
    color: white;
    border-radius: 5px;
    margin: 2px;
}

.calendar-day-header-action {
    display: inline-block;
    text-align: center;
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
    transition: background 0.3s;
}       

/* 每天的格子 */
.calendar-day {
    width: 146px;
    height: 95px;
    border: 1px solid #dd8471;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
    transition: background 0.3s;
}

/* 每天的標題日期 */
.calendar-day div:first-child {
    font-size: 16pt;
    font-weight: bold;
    color: #b8860b;
    background: #dcdcdc;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 5px;
}

/* 修改 Tooltip 本體顏色 */
.tooltip-inner {
    background-color:rgb(17, 16, 16) !important; /* 設定 Tooltip 內容背景顏色 */
    color: white !important; /* 文字顏色 */
    font-size: 14pt;
    width: 100%;
    max-width: 1000px;
    white-space: pre-line !important;  /* 🔥 保留 \n 換行 */
    word-wrap: break-word !important;  /* 🔥 避免長單字溢出 */
    text-align: left !important;  /* 🔥 讓內容靠左對齊 */
}

/* 設定 Tooltip 箭頭顏色與位置 */
.tooltip-arrow::before {
    border-color: transparent !important; /* 讓箭頭透明，避免影響 */
}

/* 設定 Tooltip 箭頭顏色 */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: rgb(17, 16, 16) !important; /* 上方箭頭顏色 */
    transform: translateY(20px); /* 上下微調箭頭 */
    border-width:10px;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: rgb(17, 16, 16) !important; /* 下方箭頭顏色 */
    border-width:10px;
}

.bs-tooltip-left .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: rgb(17, 16, 16) !important; /* 左方箭頭顏色 */
    border-width:10px;
}

.bs-tooltip-right .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: rgb(17, 16, 16) !important; /* 右方箭頭顏色 */
    border-width:10px;
}

@media (max-width: 500px) {
    .tooltip-inner {
        translateX(-50%) !important;
    }
}

/** table 滑鼠移過底色**/
.table-striped > tbody > tr:hover {
    background-color: rgb(253, 198, 137, .25) !important; /* 滑鼠懸停時變色 */
}

.table-striped > tbody > tr:hover {
    --bs-table-accent-bg: rgb(253, 198, 137, .25) !important; /* 滑鼠懸停時變色 */
}

.table-striped > thead > tr > th {
    border: #ffffff 1px dashed !important;
}
 
.table-striped > tbody > tr > td {
    border: #dd8471 1px dashed !important;
}

/* table 表頭固定*/
.fixed_table_container {
    width: 100%;
    overflow: auto;
}

/* 首列固定 */
.fixed_table_container thead tr > th:first-child,
.fixed_table_container tbody tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* 表頭固定 */
.fixed_table_container thead tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #dd8471; /* 修改背景顏色 */
    color: #fff !important;
}

/* 表頭首列強制最頂層 */
.fixed_table_container thead tr > th:first-child {
    z-index: 3;
}

/**表頭固定 第二種**/
.table-div-sticky {
    max-height: 650px; 
    overflow-y: auto;
}

.table-sticky thead th {
    position: sticky;
    top: 0;
    background-color: #dd8471;
    z-index: 2;
}
.table-sticky thead th {
    border-bottom: 2px solid #dee2e6;
    color: #fff !important;
}
.table-sticky {
    table-layout: auto;
}

.table-sticky th,
.table-sticky td {
    white-space: nowrap;
}


/***表頭固定第三種**/
.fixed_table_container2 {
    width: 100%;
    overflow: auto;
}

/* 前三欄固定 - 表頭 */
.fixed_table_container2 thead tr > th:nth-child(1),
.fixed_table_container2 thead tr > th:nth-child(2),
.fixed_table_container2 thead tr > th:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 3; /* 保持最上層 */
    background-color: #dd8471; /* 可自定義背景色 */
    color: #fff !important;
}

/* 前三欄固定 - 表身 */
.fixed_table_container2 tbody tr > td:nth-child(1),
.fixed_table_container2 tbody tr > td:nth-child(2),
.fixed_table_container2 tbody tr > td:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #ffffff; /* 可自定義背景色，避免重疊 */
}

/* 第二欄向右推，否則會被第一欄蓋住 */
.fixed_table_container2 thead tr > th:nth-child(2),
.fixed_table_container2 tbody tr > td:nth-child(2) {
    left: 100px; /* 需依實際第一欄寬度調整 */
}

/* 第三欄向右推，避免重疊 */
.fixed_table_container2 thead tr > th:nth-child(3),
.fixed_table_container2 tbody tr > td:nth-child(3) {
    left: 200px; /* 第一欄 + 第二欄總寬度 */
}

/* 表頭固定 */
.fixed_table_container2 thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #dd8471;
    color: #fff !important;
}

/* 表頭前三欄還是得高層 z-index */
.fixed_table_container2 thead tr > th:nth-child(1) { z-index: 4; }
.fixed_table_container2 thead tr > th:nth-child(2) { z-index: 4; }
.fixed_table_container2 thead tr > th:nth-child(3) { z-index: 4; }

/* hover 效果 */
.fixed_table_container2 tbody tr:hover {
    background-color: #f0f0f0; /* hover 效果整列變色 */
}

/* hover 時前三欄維持白底（覆蓋 hover 背景） */
.fixed_table_container2 tbody tr:hover > td:nth-child(1),
.fixed_table_container2 tbody tr:hover > td:nth-child(2),
.fixed_table_container2 tbody tr:hover > td:nth-child(3) {
    background-color: #ffffff !important;
}

/****/
.table-inspection-detail th {
    background-color: #dd8471;
    color: #fff;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    padding: 8px 12px;
    width: 20%;
}
.table-inspection-detail td {
    vertical-align: middle;
    padding: 8px 12px;
}

/**** 報價單 ****/
.quotation_right_div {
    height: 725px;
}

.quotation_right_div2 {
    height: 664px;
}

.disabled-overlay {
    position: relative;
    opacity: 0.5; /* 使區塊變淡 */
    pointer-events: none; /* 禁止所有滑鼠與鍵盤事件 */
    user-select: none; /* 禁止文字選取 */
}

.disabled-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* 半透明遮罩 */
    z-index: 10;
    pointer-events: none; /* 允許底層元素仍可互動 */
}

.disabled-overlay::after {
    content: attr(data-text); /* 從 data-text 屬性獲取內容 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 20;
}

/*** 報價單 設定多重選項目 ***/
.leftbox {
    transition: width 0.3s ease-in-out;
}
.rightbox {
    display: none; /* 預設隱藏 */
    position: fixed; /* 固定在視窗內 */
    top: 0;
    right: -60%; /* 初始狀態在畫面外 */
    width: 60%;
    height: 100vh; /* 讓它佔滿右邊 */
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    overflow-y: auto; /* 滾動條 */
    z-index: 1000; /* 確保在最上層 */
}
.groupMultipl_table .groupMultipl_td1, .groupMultipl_table .groupMultipl_deletebtn {
    vertical-align: middle;
}
.groupMultiplbox {
    border: #000 1px dashed;
    padding: 10px;
}
.groupMultipleitem {
    height: 700px;
}

/* 為 tbody 裡的每一行設置滑鼠樣式 */
#groupMultipleitem_Labitems tbody tr {
    cursor: pointer;
}
 /* 編輯中的列高亮顯示 */
.groupMultipl_table tbody tr.editing {
    border: 3px dashed #dd8471 !important; /* 黃色邊框 */
}
.summary {
    margin-top: 15px;
    font-size: 18px;
}
.summary input {
    width: 120px;
    text-align: center;
}
.selection-info {
    font-weight: bold;
    margin-right: 10px;
}

/**拖拉**/

.sortable-container {
    display: flex;
    flex-direction: column;
}

.sortable-group {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background: #f9f9f9;
    cursor: grab;
    transition: all 0.3s ease-in-out;
}

.sortable-group .handle {
    cursor: grab;
    background: #ddd;
    padding: 10px;
    font-weight: bold;
}
.sortable-group .unhandle {
    background: #ddd;
    padding: 10px;
    font-weight: bold;
}

.draganddropImg {
    width: 30px;
    cursor: grab;
    display: none;
}

.draganddropImg2 {
    width: 30px;
    cursor: grab;
}

.sort-mode .table {
    display: none;  /* 當排序模式開啟時，隱藏表格 */
}


/*.que_sort_list{
    overflow: hidden;
}*/

.que_sort_list_container {
    height:500px;
}
.sortable-container {
    list-style: none;
    padding: 0;
}

.sortableGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    cursor: grab;
    transition: all 0.3s ease-in-out;
}

.sortableGroup .drag-icon {
    cursor: grab;
    font-size: 16px;
    padding-right: 10px;
}

/* 拖曳中的項目樣式 */
.dragging {
    opacity: 0.6;
    background-color: #d1ecf1 !important;
    border: 2px dashed #17a2b8;
}

/* 佔位符樣式（原本位置的框線） */
.sortable-placeholder {
    background: rgba(23, 162, 184, 0.2); /* Bootstrap info 色 */
    border: 2px dashed #17a2b8;
    height: 50px;
    margin-bottom: 20px;
}

/* 拖曳時滑鼠變成抓取狀態 */
.sortableGroup {
    transition: all 0.3s ease-in-out;
    cursor: grab;
}

/* 當排序發生時，目標位置高亮顯示 */
.sortableGroup.ui-sortable-helper {
    transform: scale(1.05);
    background: #e3f2fd;
}

/** 名單匯入 **/
.uploadheader {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    padding: 2px 15px 6px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #ffac9b52;
}

#questionnaireContainer {
    font-size: 18px !important;
    font-weight: normal !important;
}

 
.fixedheader {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    padding: 2px 15px 6px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #ffac9b52;
}

/*.fixedheader .batchAppointment_header {
    padding: 10px 0px 0px 30px !important;
}*/

.fixedheader2 {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    padding: 2px 15px 6px 15px;
    border-bottom: 1px solid #ddd;
    background-color: #dd8471;
}

.fixedheader2 .control-label {
    color: #fff;
}

.striped-container > *:nth-child(odd) {
    background-color: #ffffff;
}

.striped-container > *:nth-child(even) {
    background-color: #fff5f4;
}

.striped-container > *:hover {
    background-color: rgba(253, 198, 137, 0.25);
}

.striped-only-border-left {
    border-left: 4px solid #dd8471 !important;
}

.bg-green {
    background: rgb(236, 250, 212);
}

.bg-red {
    background: rgb(255, 214, 214);
}

.text-green {
    color: rgb(111, 151, 47);
}

.layout-custom {
    width: 100% !important;
    height: 100% !important;
}

/* 移除預設藍框線 */
.panel,
.panel-body,
.layout-panel {
    border: none !important;
    box-shadow: none !important;
}

/* 自訂紅框 */
.easyui-layout > .panel {
    border: 1px solid #dd8471 !important;
}


.layout-custom .panel-body {
    border-top: 1px solid #dd8471 !important;
    padding: 0;
}

.layout-custom .panel-header {
    background: #ffe2dd !important;
    border: none !important;
}

.layout-custom .panel-title {
    color: #dd8471 !important;
    font-size: 20px !important;
}

/* 收合展開按鈕樣式處理（染色背景圖） */
.layout-custom .panel-tool a {
    filter: brightness(0.7) sepia(1) hue-rotate(330deg) saturate(6);
}
.layout-custom .panel-tool a:hover {
    filter: brightness(1) sepia(1) hue-rotate(330deg) saturate(10);
}

/* 拖曳分隔線顏色 */
.layout-split-proxy-h,
.layout-split-proxy-v {
    background-color: #dd8471 !important;
}

/* 收合之後的 panel 區塊，背景色改為與原本一致 */
.layout-expand-west,
.layout-expand-east,
.layout-expand-center,
.layout-expand-north,
.layout-expand-south {
    background: #ffe2dd !important;
}

/* 一般 tab 按鈕 */
.tabs-header .tabs-inner {
    background: #ffe2dd !important;
    color: #dd8471 !important;
    border: 1px solid #dd8471 !important;
    border-radius: 10px 10px 0 0; /* 上圓角 */
    box-sizing: border-box;
    padding: 6px 12px;
}

/* hover 效果 */
.tabs-header .tabs-inner:hover {
    background: #fcd3c7 !important;
    color: #e07a60 !important;
    border-color: #e07a60 !important;
}

/* 強制去除底部雙邊框 */
.tabs-header {
    border-bottom: none !important;
}
.tabs-header .tabs {
    border-bottom: none !important;
}

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

.layout-table-title {
    font-size: 14pt !important;
}

.layout-table-td {
    font-size: 14pt !important;
}

/* 解掉 EasyUI 自動塞的高度限制 */
.panel-body.panel-body-noheader.panel-body-noborder {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;  /* 這行也可順便拔掉底部 padding */
}

.layout-fixed-table-container {
    width: 100%;
    max-height: 750px;  /* 可以根據需要調整高度 */
    overflow-y: auto;
    overflow-x: hidden;
}

/* 表頭固定 */
.layout-fixed-table-container thead th {
    position: sticky;
    top: 0;
    background: #dd8471; /* 背景色固定 */
    color: white;
    z-index: 10;
}

.tabs-panels.tabs-panels-noborder {
    background-color: #fff;
}

.striped-only-bg-hover tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.striped-only-bg-hover tbody tr:nth-child(even) {
    background-color: #fff5f4;
}

.striped-only-bg-hover tbody tr:hover {
    background-color: rgba(253, 198, 137, 0.25);
}

.custom-mark-pink {
    background-color: #fff0e6; 
    color: #dd8471;     
    font-weight: bold;     
    padding: 0 4px;
    border-radius: 4px;
}

.sticky-footer-action {
    position: fixed;
    bottom: 0;
    z-index: 100;
}

.ml_32{
    margin-left: 32px;
}

.appointment_date_list {
    background-color: #ffac9b52 !important;
}

.selfpay-table th,
.selfpay-table td {
  border: 1px dashed #dd8471 !important;
}

.selfpay-table thead th {
    border-bottom: 2px solid #dd8471 !important;
  }

.selfpay-table tbody td:hover {
    background-color: rgba(253, 198, 137, 0.25) !important;
}


/*刪除異動列表提醒效果*/

.row-cancelled {
    animation: flashCancel 0.5s ease-in-out 3;
    border-left: 3px solid #dc3545;
}
@keyframes flashCancel {
    0%, 100% { background-color: transparent; }
    50% { background-color: #f8d7da; }
}

.row-edited {
    animation: flashEdit 0.5s ease-in-out 3;
    border-left: 3px solid #0d6efd;
}
@keyframes flashEdit {
    0%, 100% { background-color: transparent; }
    50% { background-color: #dbe9ff; }
}

/*案擰*/
/* 預設：讓按鈕容器不縮小，維持內容寬度排列 */
.d-flex.flex-wrap > div {
    flex-shrink: 0;
}

/* 手機（小於 768px）每個按鈕區塊佔滿一整行 */
@media (max-width: 767.98px) {
    .d-flex.flex-wrap > div, .d-flex.flex-wrap > div > button, .d-flex.flex-wrap > div > a  {
        width: 100%;
    }
}

.selfpay-label {
    display: flex;
    align-items: center;
}

.table-fixed td {
    white-space: normal;
    word-break: break-word;
}

.table-fixed td input {
    width: 100%;
    box-sizing: border-box;
}

.fixed-bottom-adjust {
    position: fixed;
    bottom: 0;
    left: 347px;
    width: calc(100% - 347px - 24px);
    padding: 0 12px;
    z-index: 1030;
    transition: all 0.3s ease;
}

body.vertical-collpsed .fixed-bottom-adjust {
    left: 97px; /* sidebar 收起時 */
    width: calc(100% - 97px - 24px);
}

.custom-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);  /* 半透明黑 */
    z-index: 9999; /* 層級一定要夠高，確保蓋住所有東西 */
}


/***診室管理***/
.clinicRoom .accordion_bag {
    background: #fff;
}

.clinicRoom .accordion-header {
    font-size: 16pt;
}

.popover-header, .popover-body {
    font-size: 16pt;
}

#itemGroupAccordion .accordion-item .accordion-button:not(.collapsed) {
    font-weight: bold !important;
    font-size: large !important;
    background-color: #fff5f3 !important;
    color: #dd8471 !important;
    box-shadow: none !important;
    border-color: #dd8471 !important;
}

.accordion-header .accordion-button {
    font-weight: 400 !important;
    font-size: large !important;
    background-color: #fde6e2 !important;
    color: #423232 !important;
    border-color: #dd8471 !important;
}

#itemGroupAccordion {
    border: 1px solid #dd8471;
    border-radius: 8px;
    overflow: hidden;
}


/**行事曆和簡訊**/
#allLeaflet .panel-title {
    color: #ffffff;
}
.editLineHtml_style{
    width: 80px;
}
ul.list-group{
    margin-left:0px;
}
.list-group-item {
    border: 0;
    margin-bottom: 0px;
    border-bottom: #dd8471 1px solid;
}
ul.list-group li:nth-child(2n-1) {
    background-color: #f9fafc;
    transition: all .125s ease-in-out;
}
.SMSformboxHtml label {
    font-size: 16pt !important;
}
.txtTypemess, .txtTypemess2{
    font-size: 16pt !important;
}

.room_info_border {
    border: #dd8471 1px dashed;
    padding: 10px 10px 10px 15px;
}

@media (max-width: 767.98px) {
    .mb-bottom-sm-100 {
        margin-bottom: 100px !important;
    }
}


/*櫃檯報到 診室訊息框*/
.cmdlistpublicitems_ .panel-body{
    font-size: 14pt !important;
}

.cmdlistmore_ .easyui-panel{
    width: 100% !important;
}
.cmdlistmore_ .tree-title{
    font-size: 14pt;
    height:unset;
    line-height:unset;
}
.cmdlistmore_ .tree:before {
    border: 0;
}
.cmdlistmore_ .tree-node {
    height:unset;
    margin-bottom: 10px;
}
.cmdlistmore_  .tree .tree-folder{
    height:unset;
}
.cmdlistmore_ .tree{
    overflow-x: unset;
    overflow-y: unset;
    overflow: auto;
}
.cmdlistmore_ .o_cmd_mess{
    font-size: 14pt;
    color: #f00;
}

.cmdlistmore_ .checkOK_ {
    color: #FF5722 ;
    font-size: 14pt;
}

.cmdlistmore_ .checkONO_ {
    color: #F00;
    font-size: 14pt;
}

.cmdlistmore_ .checkOPASS_ {
    color: #929292;
    font-size: 14pt;
}

.cmdlistmore_ .tree-collapsed {
    vertical-align: middle;
}

.nextSpan{
    background: #eaf2ff;
    display: block;
    width: 100%;
    padding: 0px 5px 0px 5px;
}

.cmdlistmore_ .tree-node-selected .nextSpan{
    background: #ffe48d;
}

.cmdlistmore_ .tree_title_status{
    color:#0ba396;
}

.panel-title{
    font-size: 14pt !important;
}

.panel-header {
    background: rgb(255, 214, 214);
    border: unset !important;
    border-bottom: 1px solid #dd8471 !important;
}
.panel-title {
    color: #dd8471 !important;
}

.card-body .row.border-bottom {
    border-bottom: 1px #eaedf1 solid !important;
}

.noties_table_list .table-responsive {
    border: unset !important;
}

#NoteTableList th,
#NoteTableList td {
    border: none; 
    padding: 10px;
}

#NoteTableList tr {
    border-bottom: 2px dashed #dd8471; /
}

.icon-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.icon-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icon-radio label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    font-size: 14px;
}

.icon-radio label i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.icon-radio input[type="radio"]:checked + label {
    background-color: #dd8471;
    color: white;
    border-color: #dd8471;
    box-shadow: 0 0 5pxrgb(248, 186, 172);
    font-weight: bold;
}
.icon-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.icon-radio input[type="radio"] + label::before {
    display: none;
}
.icon-radio input[type="radio"]:checked + label::after {
    display: none;
}
.icon-radio input[type="radio"] + label {
        padding-left: 0;
}

.swal2-content {
    margin-bottom: 30px;
}

.tree-toggle {
    cursor: pointer;
    padding: 4px 5px;
    user-select: none;
    transition: background-color 0.2s ease-in-out;
}
.tree-toggle:hover {
    background-color: #f8f9fa;
}
.treatment-item {
    border: #f1f1f1 1px solid;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 2px 0;
    cursor: pointer;
    transition: background-color 0.2s;
}
.treatment-item:hover {
    background-color: #eef3f8;
}
.toggle-icon {
    transition: transform 0.2s;
}
.tree-category {
    position: relative;
}
.tree-category .btn-add-treatment {
    position: absolute;
    right: 10px;
    top: 4px;
    z-index: 1;
}

/**類別&項目設定**/

#conditionTableContainer {
    max-height: 742px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background: #f9f9f9;
}

/**療程設定**/
.sortable-placeholder {
    background: #e0e0e0;
    border: 2px dashed #999;
    height: 240px;
    margin: 10px 0;
}
#treatment-plan-container {
    cursor: move;
}

/***飲食紀錄***/
.food_chart_div {
    padding: 10px;
    background: #f5f5f5;
    height:200px;
}
#foodSearchDialog {
    background: #f1f1f1;
    width: 100% !important;
}

.ui-dialog {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.ui-widget-header {
    background: #edb228;
}

.ui-dialog-titlebar {
    border-radius: 10px 10px 0 0;
}

.ui-dialog-titlebar-close {
    background: none;
    border: none;
    top: 25% !important;
}

.ui-dialog-titlebar-close:before {
    content: "×";
    font-size: 20px;
    color: #000;
}

#searchResultList {
    max-height: 800px; /* 你可依需求調整高度 */
    overflow-y: auto;
    /*border: 1px solid #ddd;
    padding: 10px;*/
    background: #fff;
}
.ui-dialog-title {
    font-size: 16pt;
}
.sample_name {
    font-size: 16pt;
}

.slide-food-card {
    border-bottom: #b81b22 2px solid;
}

.grams-input {
    width: 100px;
    display: block;
    margin: 0 auto;
}

.portion-input {
    width: 100px;
    display: block;
    margin: 0 auto;
}

.textalign_center {
    text-align: center;
}

.daily-summary {
    font-size: 16pt;
    font-weight: bold;
}

.foodTypeInput {
    width: 100px;
}


/***藥物建立**/
.form-switch .form-check-input {
    display: inline-block !important;
}

.switchUse input[type="checkbox"] + label::before {
    display: none;
}

.category-selected {
    background-color: #dd8471;
    color: #fff;
    font-weight: bold;
}

#categoryList li:hover {
    background-color: #dd8471;
    color: #fff;
    cursor: pointer;
}

.list-group-item {
    background: #F1F1F1;
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.category-grid div {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.category-grid div:hover {
    background: #f9f9f9;
    cursor: pointer;
}

.category-grid .category-selected {
    background: #dd8471;
    color: #fff;
    border-color: #dd8471;
}

/**新增處方簽**/
.medicinegroup_list {
    border: 1px solid #417478;
    border-radius: 4px;
    background: #fff;
}

.ui-menu {
    position: relative;
    min-width: 500px;
    min-height: 95px;
    border: 1px solid #417478;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #ffffff;
    overflow: auto;
}

.medicinegroup_list {
    position: relative;
    min-height: 95px;
    padding: 25px;
    border: 1px solid #417478;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ui-autocomplete {
    z-index: 1056 !important; /* 比 Bootstrap Modal (1055) 高 */
}

.ui-menu .ui-menu-item-wrapper {
    border-bottom: 1px solid #dd8471;
}

/* 滑鼠移到選項時的底色 */
.ui-menu .ui-menu-item-wrapper:hover {
    background-color: #ff9c87bf; /* 淺藍色 */
    border-bottom: 1px solid #dd8471;
    color: #000;
}

/* Autocomplete 預設 active 狀態（用鍵盤上下選擇時） */
.ui-menu .ui-state-active {
    background-color: #ff9c87bf; /* 藍色 */
    color: white;
    border: none;
}

/* 讓選項有一點 padding，美觀一點 */
.ui-menu .ui-menu-item-wrapper {
    padding: 6px 12px;
    cursor: pointer;
}


.ProfileToolBtn .btn-light {
    transition: all 0.2s ease;
}
.ProfileToolBtn .btn-light:hover {
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

#medicationTable tbody tr { cursor: pointer; }

/* 表頭樣式加強，可加入底線與背景色 */
#medicationTable thead tr {
    background-color: #f1f1f1;
    border-bottom: 2px solid #ccc;
    border-bottom: #dd8471 2px dashed !important;
}

/* 表頭內的文字加強樣式 */
#medicationTable thead th {
    font-weight: bold;
    color: #333;
}

#medicationTable tbody tr td {
    padding: 5px 0px !important;
}

/* 滑鼠 hover 高亮列 */
#medicationTable tbody tr:hover {
    background-color: #f8f9fa;
}

/* 展開子列（child row）使用的 tr 的 td 加入 padding 與背景區隔 */
#medicationTable tbody tr.shown + tr td {
    padding: 5px 5px !important;
    background-color: #fcfcfc;
    border-left: 2px solid #dd8471;
}

/* 子列內的卡片與卡片之間間距 */
.dataTables_wrapper .card-body .card + .card {
    margin-top: 0.5rem;
}

/* 當展開時 tr 被加上 .shown，這邊加樣式做出區隔 */
#medicationTable tbody tr.shown {
    background-color: #e2e2e2;
    border-bottom: 2px solid #ccc;
    border-left: 2px solid #ccc;
}

/* child 區塊裡面的卡片之間多一點間距 */
.dataTables_wrapper .card-body .card + .card {
    margin-top: 0.5rem;
}

.medicationCard .border-dashed {
    border: 2px dashed #dd8471 !important;
}

/**檢驗項目設定***/
/* === Soft Tabs === */
.nav-tabs.nav-tabs-soft{
    --tab-bg:#f8fafc; 
    --tab-active-bg:#fff; 
    --tab-text:#334155;
    --tab-muted:#64748b; 
    --tab-border:#e2e8f0; 
    --tab-accent:#0d6efd;
    /*border:1px solid var(--tab-border); 
    padding:.375rem; border-radius:.75rem;
    background:var(--tab-bg); gap:.25rem;*/
}
.nav-tabs.nav-tabs-soft .nav-link{
    position:relative; 
    /*border:0!important; */
    /*border-radius:.5rem;*/ 
    color:var(--tab-muted);
    background:transparent; 
    padding:.625rem .9rem; 
    display:inline-flex; 
    align-items:center; 
    gap:.5rem;
    transition:background .2s,color .2s,transform .15s; 
    outline:none;
}
.nav-tabs.nav-tabs-soft .nav-link .badge{background:#e2e8f0;color:#0f172a;font-weight:600}
.nav-tabs.nav-tabs-soft .nav-link .tab-icon{font-size:1.1rem;line-height:1;opacity:.9}
.nav-tabs.nav-tabs-soft .nav-link .tab-underline{
    position:absolute; 
    left:.9rem; 
    right:.9rem; 
    bottom:.35rem; 
    height:2px;
    background:#dd8471; 
    transform:scaleX(0); 
    transform-origin:left center;
    transition:transform .22s ease-in-out; 
    border-radius:1px;
}
.nav-tabs.nav-tabs-soft .nav-link:hover{
    background:rgba(13,110,253,.06); 
    color:var(--tab-text);
}
.nav-tabs.nav-tabs-soft .nav-link.active{
    background:var(--tab-active-bg); 
    color:var(--tab-text);
    box-shadow:0 1px 0 rgba(2,6,23,.02),0 4px 14px rgba(2,6,23,.06);
}
.nav-tabs.nav-tabs-soft .nav-link.active .badge{
    background:rgba(13,110,253,.12); 
    color:var(--tab-accent);
}
.nav-tabs.nav-tabs-soft .nav-link.active .tab-underline{transform:scaleX(1)}
@media (max-width:576px){
    .nav-tabs.nav-tabs-soft{overflow-x:auto; 
    white-space:nowrap; scrollbar-width:thin}
    .nav-tabs.nav-tabs-soft .nav-item{flex:0 0 auto}
}

@media (max-width:480px){
    .nav-tabs.nav-tabs-soft .nav-item {
        width: 100%;
    }
    .nav-tabs.nav-tabs-soft .nav-link {
        width: 100%;
    }
    .nav-tabs.nav-tabs-soft .nav-link.active {
        width: 100%;
        background: #dd8471;
        color: #ffffff;
    }
}

/* Sticky 容器（top 依你的 header 高度調整） */
.sticky-tabs{ position:sticky; top:64px; /*z-index:1020;*/ background:transparent; padding-top:.25rem }

/* 路由 Loading Bar（極細） */
#routeProgress{
    position:fixed; left:0; top:0; height:2px; width:0; opacity:0; pointer-events:none;
    background:linear-gradient(90deg,#0d6efd,#60a5fa); z-index:2000; box-shadow:0 0 12px rgba(13,110,253,.35);
    transition:width .25s ease, opacity .2s ease;
}
#routeProgress.is-active{ opacity:1 }
@media (prefers-reduced-motion:reduce){ #routeProgress{ transition:none } }

/* 分頁內容淡入淡出過渡 */
.tab-content .tab-pane{
    transition: opacity .25s ease, transform .25s ease;
}
.tab-content .tab-pane.fade{ opacity:0; transform:translateY(10px) }
.tab-content .tab-pane.fade.show{ opacity:1; transform:translateY(0) }


.table-active-row { border: #dd8471 2px dashed !important; background-color:#fff8e1 !important; }
.table-active-row:hover { background-color:#fff1c7 !important }
.table-striped>tbody>tr.table-active-row:nth-of-type(odd) {
    --bs-table-accent-bg:  unset !important;
}


/***處方箋**/
.drug-chip-cell { max-width: 420px; }
.drug-chips { display:flex; flex-wrap:wrap; gap:.375rem .5rem; }
.drug-chip {
    font-weight: 500;
    border-color: rgba(0,0,0,.08) !important;
    white-space: normal;             /* 長字可換行 */
    word-break: break-word;          /* 英文/藥名斷字 */
    hyphens: auto;                   /* 支援瀏覽器自動斷字 */
    padding: .35rem .5rem;
}
@media (max-width: 576px) {
    .drug-chip-cell { max-width: 100%; }
}