/*
 * data-fit-theme v2.0
 * 2025/4
 * data-ardswc大崩電視儀表板-theme 針對儀表板深色主題
 * 2025/7
 */
: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-tvWall-Dark-theme="darkColor"] {
  --tvWall-red: #ed001d;
  --tvWall-red-rgb: 237, 0, 29;
  --tvWall-yellow: #ffe75c;
  --tvWall-yellow-rgb: 255, 231, 92;
  --tvWall-green: #00cdd2;
  --tvWall-green-rgb: 0, 205, 210;
  --tvWall-blue: #80d4ff;
  --tvWall-blue-rgb: 128, 212, 255;
  --tvWall-blue-light: #caf0ff;
  --tvWall-blue-light-rgb: 202, 240, 255;
  --tvWall-blue-dark: #003050;
  --tvWall-blue-dark-rgb: 0, 48, 80;

  --tvWall-orange: #ee742b;
  --tvWall-orange-rgb: 238, 116, 43;
  --tvWall-text-dark: #44546f;
  --tvWall-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(--ardswc246-blue);
  --bs-btn-border-color: var(--ardswc246-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-blue-light {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--ardswc246-blue-dark);
  --bs-btn-bg: var(--ardswc246-blue-light);
  --bs-btn-border-color: var(--fit-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--ardswc246-blue);
  --bs-btn-hover-border-color: var(--fit-white);
  --bs-btn-focus-shadow-rgb: #06546b;
  --bs-btn-active-color: var(--ardswc246-blue-dark);
  --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(--ardswc246-green);
  --bs-btn-border-color: var(--ardswc246-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-800);
  --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;
}