@charset "UTF-8";
/* ============================================================================
   UnivWeb.css | 全站共用樣式 | 註解版 2026-10-01
   
   使用方式：
     舊版頁面：照常引用 UnivWeb.css，沿用原始樣式。
     新版頁面：<body class="univweb-modern">，共用新版排版和綠色 DataGrid。

   重要整理：
     1. 保留原本全部 176 條樣式規則（含 @media 內 1 條）的順序與宣告內容。
     2. 重複定義有時是刻意覆寫；勿只因看起來重複就刪除或換順序。
     3. 舊式部分含未附 px 等歷史寫法，這次不擅自更正，避免影響版面。
     4. 最末段【19 欄位狀態】必須留在通用輸入框樣式之後：
        讓既有 C# 的 CssClass = "Need" / "Read" / "PK" 顯示原底色。

   快速導覽（搜尋 [01]、[02] …… 即可跳轉）：
     [01] 原站 HTML 基礎字型 / 連結
     [02] 原站 ASPX 主版面
     [03] 原站 ASCX 表單及查詢區
     [04] 原站主選單
     [05] 原站 DataGrid（尚未啟用新版的頁面）
     [06] 原站 DataList
     [07] 原站 Calendar
     [08] 原站欄位標籤與舊版 Need/Read/Pk
     [09] 原站文字與訊息類
     [10] 舊版選單補充、舊密碼顯示按鈕
     [11] 全站共用元件：TextBox / SmartTextBox / Select / Button
     [12] 已新版化頁面的整體容器、表單與按鈕
     [13] 新版 DataGrid：已驗收的柔和森林綠
     [14] 新版欄寬相容、輸入框上下距離
     [15] 新版容器外框、DataGrid 外框與按鈕列間距
     [16] 新版頁面共用字型
     [17] Need：需填寫／注意（末段權重優先）
     [18] Read：唯讀／資訊（只控制顏色，不會真正唯讀）
     [19] PK / Pk：主鍵／重要識別（支援兩種大小寫）
   ============================================================================ */


/* ============================================================================
   [01] 原站 HTML 基礎樣式
   作用於尚未改版頁面；其中 a:hover 為舊站紅色連結，
   新版 DataGrid 表頭另設白色連結覆寫。
   ============================================================================ */

H1 {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: medium;
}

H2 {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: small;
}

BODY {
    font-size: small;
    margin: 0px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
}

INPUT {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: small;
}

SELECT {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: small;
}

a:link {
    color: #0000FF;
    font-weight: bold;
    text-decoration: none;
}

a:active {
    color: #00FFFF;
    font-weight: bold;
    text-decoration: none;
}

a:visited {
    color: #00FFFF;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #FF0000;
    font-weight: bold;
    text-decoration: underline;
}

ImageButton {

}


/* ============================================================================
   [02] 原站 ASPX 主版面
   原始頁面的主表格、標題和內容容器；保留原本尺寸與排版。
   ============================================================================ */

TABLE.TableDefault {
    width: 100%;
    text-align: center;
}

TD.pagetitle {
    font-weight: bold;
    width: 100%;
    vertical-align: top;
}

TD.rolehead {
    height: 0px;
}

TD.left {
    width: 100%;
}

/* 舊式版面含歷史重複 padding 與 border 寫法；本次保留以免變更行為。 */

TABLE.MainTable {
    width: 100%;
    border: 2px;
    border-collapse: separate;
    padding: 2px;
    top: 195px;
    left: 18px;
    /* border: 2px solid #336699; */
    padding: 2px;
    vertical-align: middle;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
}

TD.foot {
    text-align: center;
}

TD.MainBodyDefault {
    vertical-align: top;
    text-align: left;
    width: 100%;
}

TD.MainBody {
    vertical-align: top;
    text-align: left;
    width: 100%;
}

TD.MainArea {
    vertical-align: top;
    text-align: left;
}

/* 既有 width:90 未寫單位；此版只整理，不主動修正。 */

TD.OtherLeft {
    vertical-align: top;
    width: 90;
}

TABLE.TableCommonHeader {
    width: 100%;
}


/* ============================================================================
   [03] 原站 ASCX 共用表單
   UserControl 的查詢區、訊息區、說明區等舊式結構。
   ============================================================================ */

TABLE.TableHead {
    width: 100%;
    text-align: center;
}

TABLE.TableMain {
    width: 98%;
}

TD.TDMsg {
    height: 40px;
}

TABLE.QueryLeft {
    margin-right: 20px;
}

TD.TDSpace {
    height: 10px;
}

TD.TDData {
    background-color: #99ccff;
}

TD.TDQueryItem {
    text-align: right;
    background-color: #d7ebff;
}

TD.Step {
    color: Red;
}

TD.TitleMiddle {
    background-image: url(../Images/Common/TitleMiddle.gif);
    font-size: 20px;
    font-weight: bold;
    color: #FFFFCC;
}

TD.PS {
    color: Red;
}

TD.TDExplain {
    background: #99ccff;
    color: #3366ff;
}

TD.Header {
    color: #000066;
}

TD.TDGrid {
    text-align: center;
}

TD.TDBatch {
    text-align: center;
}

TD.TDStd {
    text-align: center;
}

TD.Report {
    text-align: center;
}

DIV.pnlButton {
    text-align: left;
}


/* ============================================================================
   [04] 原站選單樣式
   主選單啟用 / 停用狀態及連結顏色；舊素材 URL 不動。
   ============================================================================ */

Table.Menu {
    vertical-align: top;
}

td.UnUse {
    background-image: url(../Images/TopNenu/MenuBack1.png);
    background-repeat: repeat-x;
    height: 28px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
}

/* 舊主選單啟用狀態；勿與新版 body class 混淆。 */

td.InUse {
    background-image: url(../Images/TopNenu/MenuBack2.png);
    background-repeat: repeat-x;
    height: 28px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #FFFF00;
    text-align: center;
}

a.CanClick:link {
    color: #0066FF;
}

a.CanClick:hover {
    color: #FF0000;
}

a.CanClick:visited {
    color: #FFFFFF;
}

a.CanClick:active {
    color: #FFFFFF;
}

a.a1 {
    color: #FFCC00;
}

a.a2 {
    color: #7FFFD4;
}

a.a3 {
    color: #BBFF66;
}

/* a.CanNotClick
   {
   	font-family: "Microsoft JhengHei", Arial, sans-serif;
   	font-size: 16px;
   	font-weight: bold;
   	color: #FFFF00;
   } */


/* ============================================================================
   [05] 原站 DataGrid
   供舊版頁面使用；新版頁面在 [13] 與 [15] 依範圍覆寫。
   ============================================================================ */

TABLE.DgTable {
    border: 2px solid #990000;
    border-collapse: separate;
    padding: 2px;
    background-color: #FEECE6;
    vertical-align: middle;
}

/* 舊版表頭曾使用圖片。新版 dgData 會在 [13] 改用柔和綠純色。 */

TR.TRHeaderStyle {
    font-size: 16px;
    color: #FFFFFF;
    background-image: url(../Images/Common/TdBack.png);
    height: 40px;
    text-align: center;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-weight: bold;
}

TR.TRFooterStyle {
    font-size: 16px;
    color: #FFFFFF;
    background-image: url(../Images/Common/TdBack.png);
    height: 40px;
    text-align: center;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-weight: bold;
}

TR.TRItemStyle {
    text-align: left;
    background-color: #FEECE6;
}

TR.TRAlternatingItemStyle {
    text-align: left;
    background-color: #FFFFFF;
}

TD.TDItemStyle {
    border-right: #FEECE6 1px solid;
    border-top: #FEECE6 1px solid;
    font-size: 12pt;
    border-left: #FEECE6 1px solid;
    color: black;
    border-bottom: #FEECE6 1px solid;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
}

TD.TDAlternatingItemStyle {
    text-align: left;
}

TR.TRPagerStyle {
    background-color: #FFFFFF;
}


/* ============================================================================
   [06] 原站 DataList
   舊版資料清單的一般列與交錯列底色。
   ============================================================================ */

TD.TDDLItemStyle {
    vertical-align: top;
    background-color: #FEECE6;
}

TD.TDDLAlternatingItemStyle {
    vertical-align: top;
    background-color: #FFFFFF;
}


/* ============================================================================
   [07] 原站 Calendar
   舊式行事曆配色與尺寸，與 SmartTextBox 日期功能分開。
   ============================================================================ */

Table.cldTable {
    border-right: #3399cc 1px;
    border-top: #3399cc 1px;
    font-size: 8pt;
    border-left: #3399cc 1px;
    width: 210px;
    border-bottom: #3399cc 1px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    height: 200px;
    background-color: #ffffff;
}

Table.cldTitle {
    background-color: #3399CC;
    color: #FFFFFF;
    border: 0px;
    height: 100%;
}

TD.clsDayHeader {
    background-color: #33CCFF;
}

TD.cldNextPrev {
    background-color: #3399CC;
    color: #FFFF00;
}

TD.cldOtherMonthDay {
    color: #999999;
}

TD.cldSelectedDay {
    background-color: #CCFFCC;
}

TD.cldSelector {
    background-color: #3399CC;
    color: #FFFF00;
    width: 25px;
}

TD.cldToday {
    background-color: #CCFFCC;
}

TD.cldWeekendDay {
    background-color: #FFFFCC;
    color: #FF0000;
}


/* ============================================================================
   [08] 原站標籤與欄位狀態
   以下原站 Need/Read/Pk 先保留以相容舊頁面。
   新版共用樣式可能覆蓋底色，最後 [17]～[19] 會再次明確定義。
   ============================================================================ */

TD.HiHead {
    background-color: #66FFFF;
    color: #0000FF;
}

TD.TDLabel {
    text-align: right;
}

IMG.MenuImg {
    cursor: hand;
}

/* 舊版 class 定義；注意最終優先規則在 [17]。 */

INPUT.Need {
    background-color: #DAF9FD;
}

INPUT.Read {
    background-color: #E2FDDA;
}

INPUT.Pk {
    background-color: #FDFCDA;
}

input.b1 {
    background-color: #FDFCDA;
    cursor: pointer;
    border: solid 2px red;
}

SELECT.Need {
    background-color: #DAF9FD;
}

SELECT.Read {
    background-color: #E2FDDA;
}

SELECT.Pk {
    background-color: #FDFCDA;
}

TextArea.Need {
    background-color: #DAF9FD;
}

TextArea.Read {
    background-color: #E2FDDA;
}

TextArea.Pk {
    background-color: #FDFCDA;
}


/* ============================================================================
   [09] 原站文字與訊息類
   保留 label、標題、錯誤訊息的舊版呈現。
   ============================================================================ */

Span.Type {
    color: #9900ff;
}

Span.lblMsg {
    color: red;
    background-color: #ffff66;
}

Span.MenuCmd {
    font-size: 10pt;
    color: Blue;
}

Span.Msg {
    color: red;
}

Span.Title {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFF00;
}

Span.Word1 {
    text-align: left;
    font-size: 12pt;
    font-weight: bold;
    color: #FFFFFF;
}

Span.Word2 {
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    font-weight: normal;
    color: #FFFFFF;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
}


/* ============================================================================
   [10] 舊式選單補充與密碼眼睛
   這裡的 password-* 屬於舊 HTML 眼睛圖示；
   新版 SmartTextBox 的 smarttb-* 另見 [11]。
   ============================================================================ */

.TD_Menus_E {
    text-align: center;
    width: 140px;
    background-color: #006600;
    border-right: solid 2px #FFFFFF;
}

.TD_Menus_D {
    text-align: center;
    width: 140px;
    background-color: #1E1E1E;
    border-right: solid 2px #FFFFFF;
}

.TD_Menus a {
    color: #FFFFFF;
    text-decoration: none;
}

.password-container {
    position: relative;
    display: inline-block;
}

.password-input {
    box-sizing: border-box;
    padding-right: 30px;
}

.password-eye {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
}

.password-eye:focus {
    outline: 1px dotted #666;
}

/* Shared colors/sizing. Explicit values instead of CSS custom properties for older-browser fallback. */


/* ============================================================================
   [11] 全站共用元件樣式
   含 SmartTextBox 和一般 ASP.NET 控制項；這些 smartui-* class
   並非只限 univweb-modern 頁面。
   SmartTextBox 眼睛圖示、驗證訊息、GridView 也都在本區。
   ============================================================================ */

input.smartui-input,
input.smarttb-modern,
select.smartui-select,
textarea.smartui-textarea,
select.smartui-listbox {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid #b9c7d9;
    border-radius: 8px;
    background: #ffffff;
    color: #182941;
    font: 14px/1.4 "Microsoft JhengHei", Arial, sans-serif;
    outline: none;
    vertical-align: middle;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input.smartui-input,
input.smarttb-modern,
select.smartui-select {
    display: inline-block;
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 4px 9px;
}

/* Leave the native arrow so dropdown remains functional across browsers. */

select.smartui-select {
    padding-right: 24px;
    cursor: pointer;
}

select.smartui-select option {
    color: #182941;
}

textarea.smartui-textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 9px 10px;
    resize: vertical;
}

/* ASP.NET ListBox renders as <select size="..." multiple> or a tall select. */

select.smartui-listbox {
    display: block;
    width: 100%;
    min-height: 100px;
    padding: 5px;
}

select.smartui-listbox option {
    padding: 5px 7px;
    border-radius: 4px;
}

input.smartui-input:focus,
input.smarttb-modern:focus,
select.smartui-select:focus,
textarea.smartui-textarea:focus,
select.smartui-listbox:focus {
    border-color: #2f67e6;
    box-shadow: 0 0 0 3px rgba(47, 103, 230, .125);
}

input.smartui-input:disabled,
input.smarttb-modern:disabled,
select.smartui-select:disabled,
textarea.smartui-textarea:disabled,
select.smartui-listbox:disabled {
    background: #f1f5f9;
    border-color: #d7e0eb;
    color: #64748b;
    cursor: not-allowed;
    opacity: 1;
}

input.smartui-input[readonly],
input.smarttb-modern[readonly],
textarea.smartui-textarea[readonly] {
    background: #f8fafc;
}

input.smartui-input::placeholder,
input.smarttb-modern::placeholder,
textarea.smartui-textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* Buttons: <asp:Button>, <asp:LinkButton> and standard HTML buttons. */

/* 按鈕基本色仍沿用來源檔藍色；本次整理不擅自全面改綠。 */

.smartui-btn,
.smartui-btn-secondary,
.smartui-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 3px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: 600 13px/1.4 "Microsoft JhengHei", Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.smartui-btn {
    background: #2f67e6;
    color: #fff;
    border-color: #2f67e6;
}

.smartui-btn:hover {
    background: #2457c7;
    border-color: #2457c7;
    color: #fff;
}

.smartui-btn-secondary {
    background: #fff;
    color: #2f559c;
    border-color: #b9c7d9;
}

.smartui-btn-secondary:hover {
    background: #eef4ff;
    border-color: #8fabde;
    color: #234986;
}

.smartui-btn-danger {
    background: #fff;
    color: #b42318;
    border-color: #efb8b4;
}

.smartui-btn-danger:hover {
    background: #fff2f0;
}

.smartui-btn:focus-visible,
.smartui-btn-secondary:focus-visible,
.smartui-btn-danger:focus-visible {
    outline: 2px solid #2f67e6;
    outline-offset: 2px;
}

.smartui-btn:disabled,
.smartui-btn-secondary:disabled,
.smartui-btn-danger:disabled {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
}

/* 固定 30px，不需另外加高度類別。 */
/* 30px 精修覆寫：維持原位置，避免與前面的基本尺寸合併改變層疊結果。 */

input.smartui-input,
input.smarttb-modern,
select.smartui-select,
.smarttb-wrap > input.smarttb-modern {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
}

select.smartui-select {
    padding-right: 24px;
}

.smartui-btn,
.smartui-btn-secondary,
.smartui-btn-danger {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 20px;
}

/* Password：30px 欄位內的眼睛圖示保持置中且不超出輸入框。 */

.smarttb-wrap > input.smarttb-modern ~ button.smarttb-eye {
    width: 28px;
    height: 28px;
    right: 3px;
}

.smarttb-wrap > input.smarttb-modern ~ button.smarttb-eye svg {
    width: 17px;
    height: 17px;
}

/* DLL 原有 Password 使用 !important，需以更明確選取器覆寫。 */

/* SmartTextBox 密碼欄位為內建眼睛預留右側 padding；來源已使用 !important。 */

.smarttb-wrap > input.smarttb-modern[data-smart-type="Password"] {
    padding-right: 34px !important;
}

/* Checkbox/Radio: CssClass on ASP.NET controls can be rendered on a wrapping <span>.
      Both wrapper and input-selector forms are covered. */

.smartui-check,
.smartui-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 14px/1.5 "Microsoft JhengHei", Arial, sans-serif;
    color: #24364f;
    vertical-align: middle;
}

.smartui-check input[type="checkbox"],
input.smartui-check[type="checkbox"],
.smartui-radio input[type="radio"],
input.smartui-radio[type="radio"],
.smartui-options input[type="checkbox"],
.smartui-options input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0 4px 0 0;
    vertical-align: -2px;
    accent-color: #2f67e6;
    cursor: pointer;
}

.smartui-check label,
.smartui-radio label,
.smartui-options label {
    cursor: pointer;
}

.smartui-options {
    display: block;
    color: #24364f;
    font: 14px/1.85 "Microsoft JhengHei", Arial, sans-serif;
}

.smartui-options input {
    margin-right: 5px;
}

/* Labels and validation. ASP validators/ValidationSummary render spans and divs. */

.smartui-label {
    display: block;
    margin-bottom: 6px;
    color: #24364f;
    font: 600 13px/1.5 "Microsoft JhengHei", Arial, sans-serif;
}

.smartui-hint {
    display: block;
    margin-top: 5px;
    color: #6b7b92;
    font: 12px/1.55 "Microsoft JhengHei", Arial, sans-serif;
}

.smartui-error {
    color: #b42318;
    font-size: 12px;
    line-height: 1.5;
}

.smartui-summary {
    padding: 10px 12px;
    border: 1px solid #f4c7c3;
    border-radius: 8px;
    background: #fff5f4;
    color: #b42318;
    font-size: 13px;
}

.smartui-summary:empty {
    display: none;
}

.smartui-field {
    min-width: 0;
    max-width: 360px;
    margin-bottom: 14px;
}

.smartui-field > .smarttb-wrap {
    display: block;
    width: 100%;
}

/* GridView: apply CssClass="smartui-grid" to the GridView itself. */

table.smartui-grid {
    width: 100%;
    border: 1px solid #dce5f0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 9px;
    overflow: hidden;
    color: #24364f;
    font: 13px/1.5 "Microsoft JhengHei", Arial, sans-serif;
}

table.smartui-grid th {
    padding: 9px 12px;
    text-align: left;
    background: #eff4fc;
    color: #2d456a;
    border-bottom: 1px solid #dce5f0;
    font-weight: 700;
}

table.smartui-grid td {
    padding: 9px 12px;
    border-bottom: 1px solid #e9eef5;
}

table.smartui-grid tr:last-child td {
    border-bottom: 0;
}

table.smartui-grid tr:hover td {
    background: #f7faff;
}

/* FileUpload, useful but the browser may customize the system file picker. */

input.smartui-file[type="file"] {
    box-sizing: border-box;
    max-width: 100%;
    color: #24364f;
    font: 13px "Microsoft JhengHei", Arial, sans-serif;
}

input.smartui-file[type="file"]::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid #b9c7d9;
    border-radius: 7px;
    background: #f3f7ff;
    color: #2e5599;
    cursor: pointer;
}

/* Reduced-motion preference. */

@media (prefers-reduced-motion: reduce) {

    input.smartui-input,
    input.smarttb-modern,
    select.smartui-select,
    textarea.smartui-textarea,
    select.smartui-listbox,
    .smartui-btn,
    .smartui-btn-secondary,
    .smartui-btn-danger {
        transition: none;
    }

}


/* ============================================================================
   [12] 新版頁面容器、表單及按鈕
   只有 body 含 univweb-modern 時才生效；
   不任意覆寫舊頁面，也不更動 ASP.NET 控制項寬度。
   ============================================================================ */

body.univweb-modern .MainArea {
    background-color: #f3f6fb;
}

body.univweb-modern .MainArea .MainTable {
    background-color: #fff;
    border: 1px solid #dce4ef;
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(29, 49, 82, 0.08);
}

body.univweb-modern .MainArea td.MainBody {
    padding: 9px 12px;
    color: #26364b;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Do not specify control width; retain ASP.NET Width and existing table widths. */

body.univweb-modern .MainBody input[type="text"],
body.univweb-modern .MainBody input[type="password"],
body.univweb-modern .MainBody textarea,
body.univweb-modern .MainBody select {
    box-sizing: border-box;
    min-height: 30px;
    padding: 4px 7px;
    border: 1px solid #b9c8dc;
    border-radius: 5px;
    background-color: #fff;
    color: #20324b;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 13px;
    vertical-align: middle;
}

body.univweb-modern .MainBody input[type="text"]:focus,
body.univweb-modern .MainBody input[type="password"]:focus,
body.univweb-modern .MainBody textarea:focus,
body.univweb-modern .MainBody select:focus {
    border-color: #467fc5;
    outline: 2px solid #d5e7fc;
    outline-offset: 0;
}

body.univweb-modern .MainBody input[type="button"],
body.univweb-modern .MainBody input[type="submit"],
body.univweb-modern .MainBody button {
    border: 1px solid #acc4e3;
    border-radius: 6px;
    background-color: #eef5ff;
    color: #25558e;
    padding: 5px 11px;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

body.univweb-modern .MainBody input[type="button"]:hover,
body.univweb-modern .MainBody input[type="submit"]:hover,
body.univweb-modern .MainBody button:hover {
    background-color: #dcecff;
    border-color: #6c9edb;
}

/* Existing ImageButton pictures and postback behavior remain unchanged. */

body.univweb-modern .MainBody input[type="image"] {
    vertical-align: middle;
    border-radius: 5px;
    margin-right: 3px;
}

body.univweb-modern .MainBody input[type="image"]:hover {
    box-shadow: 0 0 0 2px #d2e5ff;
}

body.univweb-modern .MainBody input[type="checkbox"] {
    accent-color: #326fb8;
    vertical-align: middle;
}

/* =========================================================
   [13] UnivWeb Modern - DataGrid 共用樣式
   =========================================================
   適用條件：
   1. DataGrid 最終輸出為 <table class="DgTable">
   2. 或 table 的 id 內包含 "dgData"

   設計原則：
   - 保留舊網站的綠色識別
   - 降低飽和度，長時間觀看較舒服
   - Header 固定深綠，不因 hover 改色
   - 資料列 hover 使用柔和淡綠
   - 不依賴 DataGrid 的實際控制項名稱
   ========================================================= */
/* ---------------------------------------------------------
   DataGrid 外框與基本設定
   --------------------------------------------------------- */
body.univweb-modern .MainBody table.DgTable,
body.univweb-modern .MainBody table[id*="dgData"] {
    border: 2px solid #6f8976;
    background-color: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle;
}


    /* ---------------------------------------------------------
   所有 Header / Data Cell 的基本間距
   --------------------------------------------------------- */
    body.univweb-modern .MainBody table.DgTable > tbody > tr > th,
    body.univweb-modern .MainBody table.DgTable > tbody > tr > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr > th,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr > td {
        padding: 5px 7px;
    }

    /* =========================================================
   Header
   ========================================================= */

    /* Header 整列 */
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle {
        background-image: none;
        background-color: #347747;
        height: 38px;
    }


        /* Header 每個欄位 */
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle > th,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle > td,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle > th,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle > td {
            background-color: #347747;
            background-image: none;
            color: #ffffff;
            padding: 8px 10px;
            border-right: 1px solid #669675;
            border-bottom: 1px solid #285f38;
            font-family: "Microsoft JhengHei", Arial, sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
        }


            /* Header 最右側不再畫右框線 */
            body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle > th:last-child,
            body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle > td:last-child,
            body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle > th:last-child,
            body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle > td:last-child {
                border-right: 0;
            }


   /* ---------------------------------------------------------
   Header Hover
   Header 不應因滑鼠移入而改變顏色
   --------------------------------------------------------- */
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle:hover > th,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle:hover > td,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle:hover > th,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle:hover > td {
            background-color: #347747;
            color: #ffffff;
        }


   /* ---------------------------------------------------------
   Header 裡若包含排序連結
   避免被全站 a:hover 的紅色設定蓋掉
   --------------------------------------------------------- */
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle a,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle a:link,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle a:visited,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle a:hover,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRHeaderStyle a:active,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle a,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle a:link,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle a:visited,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle a:hover,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRHeaderStyle a:active {
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
        }


   /* =========================================================
   一般資料列
   ========================================================= */

    /* 奇數／一般資料列 */
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRItemStyle > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRItemStyle > td {
        background-color: #ffffff;
    }


    /* 偶數／交錯資料列 */
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRAlternatingItemStyle > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRAlternatingItemStyle > td {
        background-color: #f6faf7;
    }


    /* ---------------------------------------------------------
   資料格分隔線
   --------------------------------------------------------- */
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRItemStyle > td,
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRAlternatingItemStyle > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRItemStyle > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRAlternatingItemStyle > td {
        border-right: 1px solid #d8e6db;
        border-bottom: 1px solid #e1ebe3;
    }


        /* 最右側欄位不畫右框線 */
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRItemStyle > td:last-child,
        body.univweb-modern .MainBody table.DgTable > tbody > tr.TRAlternatingItemStyle > td:last-child,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRItemStyle > td:last-child,
        body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRAlternatingItemStyle > td:last-child {
            border-right: 0;
        }


    /* ---------------------------------------------------------
   資料列 Hover
   --------------------------------------------------------- */
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRItemStyle:hover > td,
    body.univweb-modern .MainBody table.DgTable > tbody > tr.TRAlternatingItemStyle:hover > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRItemStyle:hover > td,
    body.univweb-modern .MainBody table[id*="dgData"] > tbody > tr.TRAlternatingItemStyle:hover > td {
        background-color: #e8f3eb;
    }


/* ============================================================================
   [14] 新版欄寬相容和輸入框間距
   保留傳統 ASP.NET 的 Width / 固定 table 佈局；
   SmartTextBox wrapper 內部輸入框維持完整寬度。
   ============================================================================ */

body.univweb-modern .MainBody input.smartui-input,
body.univweb-modern .MainBody input.smarttb-modern,
body.univweb-modern .MainBody select.smartui-select,
body.univweb-modern .MainBody textarea.smartui-textarea,
body.univweb-modern .MainBody select.smartui-listbox {
    width: auto;
}

/* SmartTextBox wrappers retain a contained input for password-eye alignment. */
body.univweb-modern .MainBody .smarttb-wrap > input.smarttb-modern {
    width: 100%;
}

/* 已驗收的上下 3px 間距：不必逐頁修改 table 或 ASCX。 */

body.univweb-modern .MainBody input[type="text"],
body.univweb-modern .MainBody select {
    margin-top: 3px;
    margin-bottom: 3px;
}


/* ============================================================================
   [15] 新版容器外框和按鈕列間距
   此處是後期調整，覆寫前面同名 selector 的邊框，
   也包含 DataGrid、GridView 外框及上下工具列留白。
   ============================================================================ */

body.univweb-modern .MainArea .MainTable {
    border: 2px solid #b2c2b6;
}

/* 新版 DataGrid 綠灰外框（只影響已改版頁面）。 */

body.univweb-modern table.DgTable {
    border: 2px solid #6f8976;
}

body.univweb-modern table.smartui-grid {
    border: 2px solid #6f8976;
}

/* 工具列與下方內容間距；下方工具列另有獨立規則。 */

body.univweb-modern .MainBody [id$="pnlButtonUp"] {
    box-sizing: border-box;
    padding-bottom: 6px;
}

body.univweb-modern .MainBody [id$="pnlButtonDown"] {
    box-sizing: border-box;
    padding-top: 6px;
}


/* ============================================================================
   [16] 新版全頁中文字型
   統一新頁面的 Microsoft JhengHei，保留共用元件自己的字型。
   ============================================================================ */

body.univweb-modern {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
}


/* ============================================================================
   [17] 欄位狀態 Need｜需輸入
   淡青色 #DAF9FD。放在檔案最後，防止新版輸入框白底蓋掉提示色。
   ============================================================================ */

input.Need,
select.Need,
textarea.Need,
input.smartui-input.Need,
input.smarttb-modern.Need,
select.smartui-select.Need,
textarea.smartui-textarea.Need,
body.univweb-modern .MainBody input.Need,
body.univweb-modern .MainBody select.Need,
body.univweb-modern .MainBody textarea.Need {
    background-color: #DAF9FD;
}


/* ============================================================================
   [18] 欄位狀態 Read｜唯讀／資訊
   淡綠色 #E2FDDA；這是視覺提示，不等於 readonly/disabled。
   ============================================================================ */

input.Read,
select.Read,
textarea.Read,
input.smartui-input.Read,
input.smarttb-modern.Read,
select.smartui-select.Read,
textarea.smartui-textarea.Read,
body.univweb-modern .MainBody input.Read,
body.univweb-modern .MainBody select.Read,
body.univweb-modern .MainBody textarea.Read {
    background-color: #E2FDDA;
}


/* ============================================================================
   [19] 欄位狀態 PK / Pk｜主鍵／識別
   淡黃色 #FDFCDA；同時支援歷史 Pk 和 C# 常用的 PK。
   ============================================================================ */

input.PK,
input.Pk,
select.PK,
select.Pk,
textarea.PK,
textarea.Pk,
input.smartui-input.PK,
input.smartui-input.Pk,
input.smarttb-modern.PK,
input.smarttb-modern.Pk,
select.smartui-select.PK,
select.smartui-select.Pk,
textarea.smartui-textarea.PK,
textarea.smartui-textarea.Pk,
body.univweb-modern .MainBody input.PK,
body.univweb-modern .MainBody input.Pk,
body.univweb-modern .MainBody select.PK,
body.univweb-modern .MainBody select.Pk,
body.univweb-modern .MainBody textarea.PK,
body.univweb-modern .MainBody textarea.Pk {
    background-color: #FDFCDA;
}