/*!
 * data-fit-theme v2.0
 * 2025/4
 * data-wdaets-theme 針對職訓教育系統的顏色主題
 * 2025/5
 */
 :root,
 [data-fit-theme="fitColor"] {
   --fit-green: #4bce97;
   --fit-green-dark: #1f845a;
   --fit-green-light: #baf3db;
   --fit-green-rgb: 31, 132, 90;
   --fit-green-dark-rgb: 75, 206, 151;
   --fit-green-light-rgb: 186, 243, 219;
 
   --fit-yellow: #f5cd47;
   --fit-yellow-dark: #946f00;
   --fit-yellow-light: #f8e6a0;
   --fit-yellow-rgb: 245, 205, 71;
   --fit-yellow-dark-rgb: 148, 111, 0;
   --fit-yellow-light-rgb: 248, 230, 160;
 
   --fit-orange: #fea362;
   --fit-orange-dark: #c25100;
   --fit-orange-light: #fedec8;
   --fit-orange-rgb: 254, 163, 98;
   --fit-orange-dark-rgb: 194, 81, 0;
   --fit-orange-light-rgb: 254, 222, 200;
 
   --fit-red: #dc143c;
   --fit-red-dark: #9b112c;
   --fit-red-light: #ffced8;
   --fit-red-rgb: 220, 20, 60;
   --fit-red-dark-rgb: 201, 55, 44;
   --fit-red-light-rgb: 255, 169, 186;
 
   --fit-purple: #9f8fef;
   --fit-purple-dark: #6e5dc6;
   --fit-purple-light: #dfd8fd;
   --fit-purple-rgb: 159, 143, 239;
   --fit-purple-dark-rgb: 110, 93, 198;
   --fit-purple-light-rgb: 223, 216, 253;
 
   --fit-blue: #579dff;
   --fit-blue-dark: #0c66e4;
   --fit-blue-light: #cce0ff;
   --fit-blue-rgb: 87, 157, 255;
   --fit-blue-dark-rgb: 12, 102, 228;
   --fit-blue-light-rgb: 204, 224, 255;
 
   --fit-pink: #e774bb;
   --fit-pink-dark: #ae4787;
   --fit-pink-light: #fdd0ec;
   --fit-pink-rgb: 231, 116, 187;
   --fit-pink-dark-rgb: 174, 71, 135;
   --fit-pink-light-rgb: 253, 208, 236;
 
   --fit-black: #8590a2;
   --fit-black-dark: #626f86;
   --fit-black-light: #dcdfe4;
   --fit-black-rgb: 133, 144, 162;
   --fit-black-dark-rgb: 98, 111, 134;
   --fit-black-light-rgb: 220, 223, 228;
 
   --fit-dark: #212529;
   --fit-light: #f8f9fa;
   --fit-dark-rgb: 33, 37, 41;
   --fit-light-rgb: 248, 249, 250;
 
   --fit-white: #ffffff;
   --fit-white-rgb: 255, 255, 255;
 }
 
 :root,
 [data-wdaets-theme="light"] {
   --wdaets-green: #00CDD2;
   --wdaets-green-rgb: 0, 205, 210;
   --wdaets-blue: #086B8A;
   --wdaets-blue-rgb: 8, 107, 138;
   --wdaets-orange: #EE742B;
   --wdaets-orange-rgb: 238, 116, 43;
   --wdaets-text-dark: #44546f;
   --wdaets-text-dark-rgb: 68, 84, 111;
 }
 
 /*增加bootstrap沒有的樣式*/
 
 /*自訂按鈕*/
 .btn-custom-blue {
   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-white);
   --bs-btn-bg: var(--wdaets-blue);
   --bs-btn-border-color: var(--wdaets-blue);
   --bs-btn-hover-color: var(--bs-white);
   --bs-btn-hover-bg: #06546b;
   --bs-btn-hover-border-color: #06546b;
   --bs-btn-focus-shadow-rgb: #06546b;
   --bs-btn-active-color: #06546b;
   --bs-btn-active-bg: #06546b;
   --bs-btn-active-border-color: #06546b;
 }
 .btn-custom-green {
   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-white);
   --bs-btn-bg: var(--wdaets-green);
   --bs-btn-border-color: var(--wdaets-green);
   --bs-btn-hover-color: var(--bs-white);
   --bs-btn-hover-bg: #009396;
   --bs-btn-hover-border-color: #009396;
   --bs-btn-focus-shadow-rgb: #009396;
   --bs-btn-active-color: #009396;
   --bs-btn-active-bg: #009396;
   --bs-btn-active-border-color: #009396;
 }
 .btn-custom-light {
   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-gray-800);
   --bs-btn-bg: var(--bs-white);
   --bs-btn-border-color: var(--bs-gray-400);
   --bs-btn-hover-color: var(--bs-gray-800);
   --bs-btn-hover-bg: var(--bs-gray-200);
   --bs-btn-hover-border-color: var(--bs-gray-400);
   --bs-btn-focus-shadow-rgb: var(--bs-gray-200);
   --bs-btn-active-color: var(--bs-gray-200);
   --bs-btn-active-bg: var(--bs-gray-200);
   --bs-btn-active-border-color: var(--bs-gray-200);
 }
 
 .btn-outline-primary ,.btn-outline-secondary ,.btn-outline-success ,.btn-outline-danger ,.btn-outline-warning ,.btn-outline-info ,.btn-outline-dark {
   --bs-btn-bg: var(--fit-white);
 }
 
 /* 自訂table顏色 */
 .table-purple {
   --bs-table-color: #000;
   --bs-table-bg: #e6e0f8; /* 淡紫色背景 */
   --bs-table-border-color: #d3c6f0; /* 淺紫色邊框 */
   --bs-table-striped-bg: #ddd4f5; /* 條紋背景 */
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #d3c6f0; /* 點擊時背景 */
   --bs-table-active-color: #000;
   --bs-table-hover-bg: #d9ccf3; /* 滑鼠懸停背景 */
   --bs-table-hover-color: #000;
   color: var(--bs-table-color);
   border-color: var(--bs-table-border-color);
 }
 
 /*標籤顏色*/
 .label-block {
   --bs-bg-opacity: 0;
   border: 2px solid rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
 }
 
 .label-block.active {
   border: 2px solid var(--fit-dark) !important;
 }
 
 /* 1-實心色塊 */
 .theme-label-green,
 .theme-label-green:focus {
   background-color: var(--fit-green) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-green ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-green-dark,
 .theme-label-green-dark:focus {
   background-color: var(--fit-green-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-green-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-green-light,
 .theme-label-green-light:focus {
   background-color: var(--fit-green-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-green-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-yellow,
 .theme-label-yellow:focus {
   background-color: var(--fit-yellow) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-yellow ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-yellow-dark,
 .theme-label-yellow-dark:focus {
   background-color: var(--fit-yellow-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-yellow-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-yellow-light,
 .theme-label-yellow-light:focus {
   background-color: var(--fit-yellow-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-yellow-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-orange,
 .theme-label-orange:focus {
   background-color: var(--fit-orange) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-orange ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-orange-dark,
 .theme-label-orange-dark:focus {
   background-color: var(--fit-orange-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-orange-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-orange-light,
 .theme-label-orange-light:focus {
   background-color: var(--fit-orange-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-orange-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-red,
 .theme-label-red:focus {
   background-color: var(--fit-red) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-red ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-red-dark,
 .theme-label-red-dark:focus {
   background-color: var(--fit-red-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-red-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-red-light,
 .theme-label-red-light:focus {
   background-color: var(--fit-red-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-red-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-purple,
 .theme-label-purple:focus {
   background-color: var(--fit-purple) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-purple ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-purple-dark,
 .theme-label-purple-dark:focus {
   background-color: var(--fit-purple-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-purple-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-purple-light,
 .theme-label-purple-light:focus {
   background-color: var(--fit-purple-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-purple-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-blue,
 .theme-label-blue:focus {
   background-color: var(--fit-blue) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-blue ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-blue-dark,
 .theme-label-blue-dark:focus {
   background-color: var(--fit-blue-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-blue-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-blue-light,
 .theme-label-blue-light:focus {
   background-color: var(--fit-blue-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-blue-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-pink,
 .theme-label-pink:focus {
   background-color: var(--fit-pink) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-pink ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-pink-dark,
 .theme-label-pink-dark:focus {
   background-color: var(--fit-pink-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-pink-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-pink-light,
 .theme-label-pink-light:focus {
   background-color: var(--fit-pink-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-pink-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 .theme-label-black,
 .theme-label-black:focus {
   background-color: var(--fit-black) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-black ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-black-dark,
 .theme-label-black-dark:focus {
   background-color: var(--fit-black-dark) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-black-dark ~ label {
   color: var(--fit-light) !important;
 }
 
 .theme-label-black-light,
 .theme-label-black-light:focus {
   background-color: var(--fit-black-light) !important;
   color: var(--fit-dark) !important;
 }
 
 .theme-label-black-light ~ label {
   color: var(--fit-dark) !important;
 }
 
 /* 2-外框線色塊 */
 *[class*="theme-label-outline"] {
   background-color: transparent !important;
 }
 /* 外框綠 green */
 .theme-label-outline-green,
 .theme-label-outline-green:focus {
   border: 1px solid var(--fit-green) !important;
   color: var(--fit-green) !important;
 }
 
 .theme-label-outline-green ~ label {
   color: var(--fit-green) !important;
 }
 a.theme-label-outline-green:hover,
 button.theme-label-outline-green:hover,
 .theme-label-outline-green.active {
   background-color: var(--fit-green) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深綠 green-dark */
 .theme-label-outline-green-dark,
 .theme-label-outline-green-dark:focus {
   border: 1px solid var(--fit-green-dark) !important;
   color: var(--fit-green-dark) !important;
 }
 
 .theme-label-outline-green-dark ~ label {
   color: var(--fit-green-dark) !important;
 }
 a.theme-label-outline-green-dark:hover,
 button.theme-label-outline-green-dark:hover,
 .theme-label-outline-green-dark.active {
   background-color: var(--fit-green-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡綠 green-light */
 .theme-label-outline-green-light,
 .theme-label-outline-green-light:focus {
   border: 1px solid var(--fit-green-light) !important;
   color: var(--fit-green-light) !important;
 }
 
 .theme-label-outline-green-light ~ label {
   color: var(--fit-green-light) !important;
 }
 a.theme-label-outline-green-light:hover,
 button.theme-label-outline-green-light:hover,
 .theme-label-outline-green-light.active {
   background-color: var(--fit-green-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框黃 yellow */
 .theme-label-outline-yellow,
 .theme-label-outline-yellow:focus {
   border: 1px solid var(--fit-yellow) !important;
   color: var(--fit-yellow) !important;
 }
 
 .theme-label-outline-yellow ~ label {
   color: var(--fit-yellow) !important;
 }
 a.theme-label-outline-yellow:hover,
 button.theme-label-outline-yellow:hover,
 .theme-label-outline-yellow.active {
   background-color: var(--fit-yellow) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深黃 yellow-dark*/
 .theme-label-outline-yellow-dark,
 .theme-label-outline-yellow-dark:focus {
   border: 1px solid var(--fit-yellow-dark) !important;
   color: var(--fit-yellow-dark) !important;
 }
 
 .theme-label-outline-yellow-dark ~ label {
   color: var(--fit-yellow-dark) !important;
 }
 a.theme-label-outline-yellow-dark:hover,
 button.theme-label-outline-yellow-dark:hover,
 .theme-label-outline-yellow-dark.active {
   background-color: var(--fit-yellow-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淺黃 yellow-light*/
 .theme-label-outline-yellow-light,
 .theme-label-outline-yellow-light:focus {
   border: 1px solid var(--fit-yellow-light) !important;
   color: var(--fit-yellow-light) !important;
 }
 
 .theme-label-outline-yellow-light ~ label {
   color: var(--fit-yellow-light) !important;
 }
 a.theme-label-outline-yellow-light:hover,
 button.theme-label-outline-yellow-light:hover,
 .theme-label-outline-yellow-light.active {
   background-color: var(--fit-yellow-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框橘 orange*/
 .theme-label-outline-orange,
 .theme-label-outline-orange:focus {
   border: 1px solid var(--fit-orange) !important;
   color: var(--fit-orange) !important;
 }
 
 .theme-label-outline-orange ~ label {
   color: var(--fit-orange) !important;
 }
 a.theme-label-outline-orange:hover,
 button.theme-label-outline-orange:hover,
 .theme-label-outline-orange.active {
   background-color: var(--fit-orang) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深橘 orange-dark*/
 .theme-label-outline-orange-dark,
 .theme-label-outline-orange-dark:focus {
   border: 1px solid var(--fit-orange-dark) !important;
   color: var(--fit-orange-dark) !important;
 }
 
 .theme-label-outline-orange-dark ~ label {
   color: var(--fit-orange-dark) !important;
 }
 a.theme-label-outline-orange-dark:hover,
 button.theme-label-outline-orange-dark:hover,
 .theme-label-outline-orange-dark.active {
   background-color: var(--fit-orange-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淺橘 orange-light*/
 .theme-label-outline-orange-light,
 .theme-label-outline-orange-light:focus {
   border: 1px solid var(--fit-orange-light) !important;
   color: var(--fit-orange-light) !important;
 }
 
 .theme-label-outline-orange-light ~ label {
   color: var(--fit-orange-light) !important;
 }
 a.theme-label-outline-orange-light:hover,
 button.theme-label-outline-orange-light:hover,
 .theme-label-outline-orange-light.active {
   background-color: var(--fit-orange-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框紅 red*/
 .theme-label-outline-red,
 .theme-label-outline-red:focus {
   border: 1px solid var(--fit-red) !important;
   color: var(--fit-light) !important;
 }
 
 .theme-label-outline-red ~ label {
   color: var(--fit-light) !important;
 }
 a.theme-label-outline-red:hover,
 button.theme-label-outline-red:hover,
 .theme-label-outline-red.active {
   background-color: var(--fit-red) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深紅 red-dark*/
 .theme-label-outline-red-dark,
 .theme-label-outline-red-dark:focus {
   border: 1px solid var(--fit-red-dark) !important;
   color: var(--fit-red-dark) !important;
 }
 
 .theme-label-outline-red-dark ~ label {
   color: var(--fit-red-dark) !important;
 }
 a.theme-label-outline-red-dark:hover,
 button.theme-label-outline-red-dark:hover,
 .theme-label-outline-red-dark.active {
   background-color: var(--fit-red-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡紅 red-light*/
 .theme-label-outline-red-light,
 .theme-label-outline-red-light:focus {
   border: 1px solid var(--fit-red-light) !important;
   color: var(--fit-red-light) !important;
 }
 
 .theme-label-outline-red-light ~ label {
   color: var(--fit-red-light) !important;
 }
 a.theme-label-outline-red-light:hover,
 button.theme-label-outline-red-light:hover,
 .theme-label-outline-red-light.active {
   background-color: var(--fit-red-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框紫 purple */
 .theme-label-outline-purple,
 .theme-label-outline-purple:focus {
   border: 1px solid var(--fit-purple) !important;
   color: var(--fit-purple) !important;
 }
 
 .theme-label-outline-purple ~ label {
   color: var(--fit-purple) !important;
 }
 a.theme-label-outline-purple:hover,
 button.theme-label-outline-purple:hover,
 .theme-label-outline-purple.active {
   background-color: var(--fit-purple) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深紫 purple-dark */
 .theme-label-outline-purple-dark,
 .theme-label-outline-purple-dark:focus {
   border: 1px solid var(--fit-purple-dark) !important;
   color: var(--fit-purple-dark) !important;
 }
 
 .theme-label-outline-purple-dark ~ label {
   color: var(--fit-purple-dark) !important;
 }
 a.theme-label-outline-purple-dark:hover,
 button.theme-label-outline-purple-dark:hover,
 .theme-label-outline-purple-dark.active {
   background-color: var(--fit-purple-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡紫 purple-light */
 .theme-label-outline-purple-light,
 .theme-label-outline-purple-light:focus {
   border: 1px solid var(--fit-purple-light) !important;
   color: var(--fit-purple-light) !important;
 }
 
 .theme-label-outline-purple-light ~ label {
   color: var(--fit-purple-light) !important;
 }
 a.theme-label-outline-purple-light:hover,
 button.theme-label-outline-purple-light:hover,
 .theme-label-outline-purple-light.active {
   background-color: var(--fit-purple-ligh) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框藍 blue */
 .theme-label-outline-blue,
 .theme-label-outline-blue:focus {
   border: 1px solid var(--fit-blue) !important;
   color: var(--fit-blue) !important;
 }
 
 .theme-label-outline-blue ~ label {
   color: var(--fit-blue) !important;
 }
 a.theme-label-outline-blue:hover,
 button.theme-label-outline-blue:hover,
 .theme-label-outline-blue.active {
   background-color: var(--fit-blue) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深藍 blue-dark */
 .theme-label-outline-blue-dark,
 .theme-label-outline-blue-dark:focus {
   border: 1px solid var(--fit-blue-dark) !important;
   color: var(--fit-blue-dark) !important;
 }
 
 .theme-label-outline-blue-dark ~ label {
   color: var(--fit-blue-dark) !important;
 }
 a.theme-label-outline-blue-dark:hover,
 button.theme-label-outline-blue-dark:hover,
 .theme-label-outline-blue-dark.active {
   background-color: var(--fit-blue-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡藍 blue-light */
 .theme-label-outline-blue-light,
 .theme-label-outline-blue-light:focus {
   border: 1px solid var(--fit-blue-light) !important;
   color: var(--fit-blue-light) !important;
 }
 
 .theme-label-outline-blue-light ~ label {
   color: var(--fit-blue-light) !important;
 }
 a.theme-label-outline-blue-light:hover,
 button.theme-label-outline-blue-light:hover,
 .theme-label-outline-blue-light.active {
   background-color: var(--fit-blue-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框粉紅 pinky */
 .theme-label-outline-pink,
 .theme-label-outline-pink:focus {
   border: 1px solid var(--fit-pink) !important;
   color: var(--fit-pink) !important;
 }
 
 .theme-label-outline-pink ~ label {
   color: var(--fit-pink) !important;
 }
 a.theme-label-outline-pink:hover,
 button.theme-label-outline-pink:hover,
 .theme-label-outline-pink.active {
   background-color: var(--fit-pink) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深粉紅 pinky-dark */
 .theme-label-outline-pink-dark,
 .theme-label-outline-pink-dark:focus {
   border: 1px solid var(--fit-pink-dark) !important;
   color: var(--fit-pink-dark) !important;
 }
 
 .theme-label-outline-pink-dark ~ label {
   color: var(--fit-pink-dark) !important;
 }
 a.theme-label-outline-pink-dark:hover,
 button.theme-label-outline-pink-dark:hover,
 .theme-label-outline-pink-dark.active {
   background-color: var(--fit-pink-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡粉紅 pinky-light */
 .theme-label-outline-pink-light,
 .theme-label-outline-pink-light:focus {
   border: 1px solid var(--fit-pink-light) !important;
   color: var(--fit-pink-light) !important;
 }
 
 .theme-label-outline-pink-light ~ label {
   color: var(--fit-pink-light) !important;
 }
 a.theme-label-outline-pink-light:hover,
 button.theme-label-outline-pink-light:hover,
 .theme-label-outline-pink-light.active {
   background-color: var(--fit-pink-light) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框黑 black */
 .theme-label-outline-black,
 .theme-label-outline-black:focus {
   border: 1px solid var(--fit-black) !important;
   color: var(--fit-black) !important;
 }
 
 .theme-label-outline-black ~ label {
   color: var(--fit-black) !important;
 }
 a.theme-label-outline-black:hover,
 button.theme-label-outline-black:hover,
 .theme-label-outline-black.active {
   background-color: var(--fit-black) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框深黑 black */
 .theme-label-outline-black-dark,
 .theme-label-outline-black-dark:focus {
   border: 1px solid var(--fit-black-dark) !important;
   color: var(--fit-black-dark) !important;
 }
 
 .theme-label-outline-black-dark ~ label {
   color: var(--fit-black-dark) !important;
 }
 a.theme-label-outline-black-dark:hover,
 button.theme-label-outline-black-dark:hover,
 .theme-label-outline-black-dark.active {
   background-color: var(--fit-black-dark) !important;
   color: var(--fit-light) !important;
 }
 
 /* 外框淡黑 black */
 .theme-label-outline-black-light,
 .theme-label-outline-black-light:focus {
   border: 1px solid var(--fit-black-light) !important;
   color: var(--fit-black-light) !important;
 }
 
 .theme-label-outline-black-light ~ label {
   color: var(--fit-black-light) !important;
 }
 a.theme-label-outline-black-light:hover,
 button.theme-label-outline-black-light:hover,
 .theme-label-outline-black-light.active {
   background-color: var(--fit-black-light) !important;
   color: var(--fit-light) !important;
 }
 
 /*3-卡片邊框*/
 .theme-border-green {
   border: 2px solid var(--fit-green);
 }
 .theme-border-yellow {
   border: 2px solid var(--fit-yellow);
 }
 .theme-border-orange {
   border: 2px solid var(--fit-orange);
 }
 .theme-border-red {
   border: 2px solid var(--fit-red);
 }
 .theme-border-purple {
   border: 2px solid var(--fit-purple);
 }
 .theme-border-blue {
   border: 2px solid var(--fit-blue);
 }
 .theme-border-pink {
   border: 2px solid var(--fit-pink);
 }
 .theme-border-black {
   border: 2px solid var(--fit-black);
 }
 
 /* 4-文字顏色 */
 .theme-text-green {
   color: var(--fit-green) !important;
 }
 .theme-text-green-dark {
   color: var(--fit-green-dark) !important;
 }
 .theme-text-green-light {
   color: var(--fit-green-light) !important;
 }
 .theme-text-yellow {
   color: var(--fit-yellow) !important;
 }
 .theme-text-yellow-dark {
   color: var(--fit-yellow-dark) !important;
 }
 .theme-text-yellow-light {
   color: var(--fit-yellow-light) !important;
 }
 .theme-text-orange {
   color: var(--fit-orange) !important;
 }
 .theme-text-orange-dark {
   color: var(--fit-orange-dark) !important;
 }
 .theme-text-orange-light {
   color: var(--fit-orange-light) !important;
 }
 .theme-text-red {
   color: var(--fit-red) !important;
 }
 .theme-text-red-dark {
   color: var(--fit-red-dark) !important;
 }
 .theme-text-red-light {
   color: var(--fit-red-light) !important;
 }
 .theme-text-purple {
   color: var(--fit-purple) !important;
 }
 .theme-text-purple-dark {
   color: var(--fit-purple-dark) !important;
 }
 .theme-text-purple-light {
   color: var(--fit-purple-light) !important;
 }
 .theme-text-blue {
   color: var(--fit-blue) !important;
 }
 .theme-text-blue-dark {
   color: var(--fit-blue-dark) !important;
 }
 .theme-text-blue-light {
   color: var(--fit-blue-light) !important;
 }
 .theme-text-pink {
   color: var(--fit-pink) !important;
 }
 .theme-text-pink-dark {
   color: var(--fit-pink-dark) !important;
 }
 .theme-text-pink-light {
   color: var(--fit-pink-light) !important;
 }
 .theme-text-black {
   color: var(--fit-black) !important;
 }
 .theme-text-black-dark {
   color: var(--fit-black-dark) !important;
 }
 .theme-text-black-light {
   color: var(--fit-black-light) !important;
 }