/* CDM utility classes
   取代 View 內嵌的 style="..."，目的是讓 CSP 的 style-src 不需要 unsafe-inline。
   注意：
   1. 一律不加 !important — 這些 class 會被 jQuery .show()/.hide()、v-show 寫的
      inline style 覆蓋，那正是預期行為；加了 !important 會讓顯示切換失效。
   2. 只用 px，不要用 rem — bootstrap.table.min.css 有 html{font-size:10px}。
   3. 選擇器刻意重複三次以拉高 specificity(0-3-0)。原本這些是 inline style，會贏過所有
      stylesheet 規則；改成單一 class 後會輸給 Bootstrap 的兩層選擇器(如 .input-group
      .form-control{width:100%})，畫面會跑版。重複後仍低於 inline style，所以 jQuery
      .show()/.hide() 與 v-show 的切換照常運作。
   Bugzilla 101 */

.cdm-align-items-x4.cdm-align-items-x4.cdm-align-items-x4 { align-items: center; }
.cdm-bd-0.cdm-bd-0.cdm-bd-0 { border: 0; }
.cdm-bd-x1.cdm-bd-x1.cdm-bd-x1 { border: 1px lightgray solid; }
.cdm-bd-x16.cdm-bd-x16.cdm-bd-x16 { border: 1px solid #ddd; }
.cdm-bg-222.cdm-bg-222.cdm-bg-222 { background: #222; }
.cdm-bg-222d32.cdm-bg-222d32.cdm-bg-222d32 { background: #222d32; }
.cdm-bg-367fa9.cdm-bg-367fa9.cdm-bg-367fa9 { background: #367fa9; }
.cdm-bg-f4f5f7.cdm-bg-f4f5f7.cdm-bg-f4f5f7 { background: #f4f5f7; }
.cdm-bg-f5f5f5.cdm-bg-f5f5f5.cdm-bg-f5f5f5 { background: #f5f5f5; }
.cdm-bg-f9fafc.cdm-bg-f9fafc.cdm-bg-f9fafc { background: #f9fafc; }
.cdm-bg-fefefe.cdm-bg-fefefe.cdm-bg-fefefe { background: #fefefe; }
.cdm-bg-honeydew.cdm-bg-honeydew.cdm-bg-honeydew { background-color: honeydew; }
.cdm-bg-transparent.cdm-bg-transparent.cdm-bg-transparent { background-color: transparent; }
.cdm-bg-white.cdm-bg-white.cdm-bg-white { background-color: white; }
.cdm-bottom-180.cdm-bottom-180.cdm-bottom-180 { bottom: 180px; }
.cdm-c-7f8c8d.cdm-c-7f8c8d.cdm-c-7f8c8d { color: #7f8c8d; }
.cdm-c-888.cdm-c-888.cdm-c-888 { color: #888; }
.cdm-c-black.cdm-c-black.cdm-c-black { color: black; }
.cdm-c-c0392b.cdm-c-c0392b.cdm-c-c0392b { color: #c0392b; }
.cdm-c-deepskyblue.cdm-c-deepskyblue.cdm-c-deepskyblue { color: deepskyblue; }
.cdm-c-ff0000.cdm-c-ff0000.cdm-c-ff0000 { color: #FF0000; }
.cdm-c-fff.cdm-c-fff.cdm-c-fff { color: #fff; }
.cdm-c-lightblue.cdm-c-lightblue.cdm-c-lightblue { color: lightblue; }
.cdm-c-red.cdm-c-red.cdm-c-red { color: red; }
.cdm-c-white.cdm-c-white.cdm-c-white { color: white; }
.cdm-cursor-pointer.cdm-cursor-pointer.cdm-cursor-pointer { cursor: pointer; }
.cdm-d-block.cdm-d-block.cdm-d-block { display: block; }
.cdm-d-flex.cdm-d-flex.cdm-d-flex { display: flex; }
.cdm-d-none.cdm-d-none.cdm-d-none { display: none; }
.cdm-f-left.cdm-f-left.cdm-f-left { float: left; }
.cdm-flex-direction-x6.cdm-flex-direction-x6.cdm-flex-direction-x6 { flex-direction: column; }
.cdm-font-family-x15.cdm-font-family-x15.cdm-font-family-x15 { font-family: Consolas,monospace; }
.cdm-fs-12.cdm-fs-12.cdm-fs-12 { font-size: 12px; }
.cdm-fs-13.cdm-fs-13.cdm-fs-13 { font-size: 13px; }
.cdm-fs-14.cdm-fs-14.cdm-fs-14 { font-size: 14px; }
.cdm-fs-15.cdm-fs-15.cdm-fs-15 { font-size: 15px; }
.cdm-fs-18.cdm-fs-18.cdm-fs-18 { font-size: 18px; }
.cdm-fs-1_0rem.cdm-fs-1_0rem.cdm-fs-1_0rem { font-size: 1.0rem; }
.cdm-fs-20.cdm-fs-20.cdm-fs-20 { font-size: 20px; }
.cdm-fst-italic.cdm-fst-italic.cdm-fst-italic { font-style: italic; }
.cdm-fw-bold.cdm-fw-bold.cdm-fw-bold { font-weight: bold; }
.cdm-gap-x8.cdm-gap-x8.cdm-gap-x8 { gap: 10px; }
.cdm-h-0.cdm-h-0.cdm-h-0 { height: 0px; }
.cdm-h-100p.cdm-h-100p.cdm-h-100p { height: 100%; }
.cdm-h-150.cdm-h-150.cdm-h-150 { height: 150px; }
.cdm-h-20.cdm-h-20.cdm-h-20 { height: 20px; }
.cdm-h-200.cdm-h-200.cdm-h-200 { height: 200px; }
.cdm-h-40.cdm-h-40.cdm-h-40 { height: 40px; }
.cdm-h-400.cdm-h-400.cdm-h-400 { height: 400px; }
.cdm-h-420.cdm-h-420.cdm-h-420 { height: 420px; }
.cdm-h-640.cdm-h-640.cdm-h-640 { height: 640px; }
.cdm-h-7.cdm-h-7.cdm-h-7 { height: 7px; }
.cdm-justify-content-x5.cdm-justify-content-x5.cdm-justify-content-x5 { justify-content: center; }
.cdm-justify-content-x7.cdm-justify-content-x7.cdm-justify-content-x7 { justify-content: space-between; }
.cdm-lh-1_6.cdm-lh-1_6.cdm-lh-1_6 { line-height: 1.6; }
.cdm-m-0.cdm-m-0.cdm-m-0 { margin: 0; }
.cdm-m-15.cdm-m-15.cdm-m-15 { margin: 15px; }
.cdm-m-x10.cdm-m-x10.cdm-m-x10 { margin: 50px -20px 0 -20px; }
.cdm-m-x14.cdm-m-x14.cdm-m-x14 { margin: 20px auto; }
.cdm-m-x2.cdm-m-x2.cdm-m-x2 { margin: 0 0 0 10px; }
.cdm-m-x3.cdm-m-x3.cdm-m-x3 { margin: 10px 0 0 10px; }
.cdm-max-width-x13.cdm-max-width-x13.cdm-max-width-x13 { max-width: 800px; }
.cdm-maxh-100.cdm-maxh-100.cdm-maxh-100 { max-height: 100px; }
.cdm-mb-10.cdm-mb-10.cdm-mb-10 { margin-bottom: 10px; }
.cdm-mb-20.cdm-mb-20.cdm-mb-20 { margin-bottom: 20px; }
.cdm-mb-n8.cdm-mb-n8.cdm-mb-n8 { margin-bottom: -8px; }
.cdm-min-width-x9.cdm-min-width-x9.cdm-min-width-x9 { min-width: 700px; }
.cdm-ml-10.cdm-ml-10.cdm-ml-10 { margin-left: 10px; }
.cdm-ml-100.cdm-ml-100.cdm-ml-100 { margin-left: 100px; }
.cdm-ml-190.cdm-ml-190.cdm-ml-190 { margin-left: 190px; }
.cdm-ml-30.cdm-ml-30.cdm-ml-30 { margin-left: 30px; }
.cdm-ml-5.cdm-ml-5.cdm-ml-5 { margin-left: 5px; }
.cdm-ml-80.cdm-ml-80.cdm-ml-80 { margin-left: 80px; }
.cdm-ml-n7.cdm-ml-n7.cdm-ml-n7 { margin-left: -7px; }
.cdm-mr-20.cdm-mr-20.cdm-mr-20 { margin-right: 20px; }
.cdm-mt-10.cdm-mt-10.cdm-mt-10 { margin-top: 10px; }
.cdm-mt-18.cdm-mt-18.cdm-mt-18 { margin-top: 18px; }
.cdm-mt-20.cdm-mt-20.cdm-mt-20 { margin-top: 20px; }
.cdm-mt-5.cdm-mt-5.cdm-mt-5 { margin-top: 5px; }
.cdm-mt-8.cdm-mt-8.cdm-mt-8 { margin-top: 8px; }
.cdm-mt-n8.cdm-mt-n8.cdm-mt-n8 { margin-top: -8px; }
.cdm-ovy-auto.cdm-ovy-auto.cdm-ovy-auto { overflow-y: auto; }
.cdm-ovy-hidden.cdm-ovy-hidden.cdm-ovy-hidden { overflow-y: hidden; }
.cdm-p-10.cdm-p-10.cdm-p-10 { padding: 10px; }
.cdm-p-15.cdm-p-15.cdm-p-15 { padding: 15px; }
.cdm-p-20.cdm-p-20.cdm-p-20 { padding: 20px; }
.cdm-p-5.cdm-p-5.cdm-p-5 { padding: 5px; }
.cdm-pl-0.cdm-pl-0.cdm-pl-0 { padding-left: 0px; }
.cdm-pos-absolute.cdm-pos-absolute.cdm-pos-absolute { position: absolute; }
.cdm-pt-40.cdm-pt-40.cdm-pt-40 { padding-top: 40px; }
.cdm-pt-5.cdm-pt-5.cdm-pt-5 { padding-top: 5px; }
.cdm-radius-4.cdm-radius-4.cdm-radius-4 { border-radius: 4px; }
.cdm-shadow-x11.cdm-shadow-x11.cdm-shadow-x11 { box-shadow: 0 0 3px rgba(0,0,0,0.4); }
.cdm-shadow-x12.cdm-shadow-x12.cdm-shadow-x12 { box-shadow: 0 0 2px rgba(0,0,0,0.1); }
.cdm-ta-center.cdm-ta-center.cdm-ta-center { text-align: center; }
.cdm-td-none.cdm-td-none.cdm-td-none { text-decoration: none; }
.cdm-td-underline.cdm-td-underline.cdm-td-underline { text-decoration: underline; }
.cdm-w-10.cdm-w-10.cdm-w-10 { width: 10px; }
.cdm-w-100.cdm-w-100.cdm-w-100 { width: 100px; }
.cdm-w-100p.cdm-w-100p.cdm-w-100p { width: 100%; }
.cdm-w-120.cdm-w-120.cdm-w-120 { width: 120px; }
.cdm-w-150.cdm-w-150.cdm-w-150 { width: 150px; }
.cdm-w-160.cdm-w-160.cdm-w-160 { width: 160px; }
.cdm-w-180.cdm-w-180.cdm-w-180 { width: 180px; }
.cdm-w-190.cdm-w-190.cdm-w-190 { width: 190px; }
.cdm-w-20p.cdm-w-20p.cdm-w-20p { width: 20%; }
.cdm-w-30.cdm-w-30.cdm-w-30 { width: 30px; }
.cdm-w-33_33333p.cdm-w-33_33333p.cdm-w-33_33333p { width: 33.33333%; }
.cdm-w-350.cdm-w-350.cdm-w-350 { width: 350px; }
.cdm-w-400.cdm-w-400.cdm-w-400 { width: 400px; }
.cdm-w-500.cdm-w-500.cdm-w-500 { width: 500px; }
.cdm-w-80.cdm-w-80.cdm-w-80 { width: 80px; }
.cdm-w-80p.cdm-w-80p.cdm-w-80p { width: 80%; }
.cdm-wb-keep-all.cdm-wb-keep-all.cdm-wb-keep-all { word-break: keep-all; }

/* 取代 onmouseover="this.style.transform='scale(1.1)'" 這類純視覺的 inline handler。
   移除 script-src 的 unsafe-inline 之後那種寫法會被擋掉，改用 :hover 由 CSS 處理，
   對 JS 動態塞進 DOM 的元素也一樣適用，不需要另外掛監聽。
   選擇器重複三次是本檔的既有慣例，把權重拉到 0-3-0 以蓋過 Bootstrap 的兩層選擇器。 */
.cdm-hover-scale.cdm-hover-scale.cdm-hover-scale { transition: transform 0.15s ease-in-out; }
.cdm-hover-scale.cdm-hover-scale.cdm-hover-scale:hover { transform: scale(1.1); }