/*!
 * data-fit-theme v2.0
 * 2025/4
 * data-ardswc246-theme 針對土石流防災資訊網的顏色主題
 * 2025/5
 */
:root,
[data-fit-theme="fitColor"] {
    --fit-green: #00bb00;
    --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-brown: #603813;
    --fit-brown-dark: #261608;
    --fit-brown-light: #c47226;
    --fit-brown-rgb: 96, 56, 19;
    --fit-brown-dark-rgb: 38, 22, 8;
    --fit-brown-light-rgb: 196, 114, 38;
    --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-ardswc246-theme="light"] {
    --ardswc246-red: #ed001d;
    --ardswc246-red-rgb: 237, 0, 29;
    --ardswc246-yellow: #ffe75c;
    --ardswc246-yellow-rgb: 255, 231, 92;
    --ardswc246-green: #00cdd2;
    --ardswc246-green-rgb: 0, 205, 210;
    /* --ardswc246-blue: #2385c4; */
    /* --ardswc246-blue-rgb: 35, 133, 196; */
    --ardswc246-blue: #1c77b0;
    --ardswc246-blue-rgb: 28, 119, 176;
    --ardswc246-blue-light: #b0d8f3;
    --ardswc246-blue-light-rgb: 176, 216, 243;
    --ardswc246-blue-dark: #003050;
    --ardswc246-blue-dark-rgb: 0, 48, 80;
    --ardswc246-orange: #ee742b;
    --ardswc246-orange-rgb: 238, 116, 43;
    --ardswc246-text-dark: #44546f;
    --ardswc246-text-dark-rgb: 68, 84, 111;
}

/*ardswc-雨量值*/
.rain-green,
table .rain-green,
.dtTable > tbody > tr.rain-green > td {
    color: var(--fit-green) !important;
}

.rain-blue,
table .rain-blue,
.dtTable > tbody > tr.rain-blue > td {
    color: var(--fit-blue-dark) !important;
}

.rain-brown,
table .rain-brown,
.dtTable > tbody > tr.rain-brown > td {
    color: var(--fit-yellow-dark) !important;
}

.rain-pink,
table .rain-pink,
.dtTable > tbody > tr.rain-pink > td {
    color: var(--fit-pink) !important;
}

.rain-red,
table .rain-red,
.dtTable > tbody > tr.rain-red > td {
    color: var(--fit-red) !important;
}

/*增加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(--fit-white);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
    --bs-btn-hover-border-color: var(--fit-white);
    --bs-btn-focus-shadow-rgb: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
    --bs-btn-active-color: var(--fit-white);
    --bs-btn-active-bg: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
    --bs-btn-active-border-color: rgba(var(--ardswc246-blue-dark-rgb), 0.7);
}

.btn-custom-outline-blue {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--ardswc246-blue);
    --bs-btn-bg: var(--fit-white);
    --bs-btn-border-color: var(--ardswc246-blue);
    --bs-btn-hover-color: var(--fit-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-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(--fit-white);
    --bs-btn-hover-bg: rgba(var(--ardswc246-blue-rgb), 0.5);
    --bs-btn-hover-border-color: var(--fit-white);
    --bs-btn-focus-shadow-rgb: #06546b98;
    --bs-btn-active-color: var(--fit-white);
    --bs-btn-active-bg: #06546b98;
    --bs-btn-active-border-color: #06546b98;
}

.btn-custom-outline-blue-light {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--ardswc246-blue);
    --bs-btn-bg: var(--fit-white);
    --bs-btn-border-color: var(--ardswc246-blue-light);
    --bs-btn-hover-color: var(--ardswc246-blue-dark);
    --bs-btn-hover-bg: var(--ardswc246-blue-light);
    --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);
}
/* 線條顏色 */
.border-custom-blue {
    /* --bs-border-opacity: 1; */
    border-color: rgba(var(--ardswc246-blue-light), 1) !important;
}
/* 背景顏色-fit */
.bg-fit-green {
    background: var(--fit-green) !important;
    color: var(--fit-white);
}

.bg-fit-green-dark {
    background: var(--fit-green-dark) !important;
    color: var(--fit-white);
}

.bg-fit-green-light {
    background: var(--fit-green-light) !important;
    color: var(--fit-green-dark);
}

.bg-fit-yellow {
    background: var(--fit-yellow) !important;
    color: var(--fit-brown-dark);
}

.bg-fit-yellow-dark {
    background: var(--fit-yellow-dark) !important;
    color: var(--fit-white);
}

.bg-fit-yellow-light {
    background: var(--fit-yellow-light) !important;
    color: var(--fit-brown-dark);
}

.bg-fit-orange {
    background: var(--fit-orange) !important;
    color: var(--fit-white);
}

.bg-fit-orange-dark {
    background: var(--fit-orange-dark) !important;
    color: var(--fit-white);
}

.bg-fit-orange-light {
    background: var(--fit-orange-light) !important;
    color: var(--fit-orange-dark);
}

.bg-fit-red {
    background: var(--fit-red) !important;
    color: var(--fit-white);
}

.bg-fit-red-dark {
    background: var(--fit-red-dark) !important;
    color: var(--fit-white);
}

.bg-fit-red-light {
    background: var(--fit-red-light) !important;
    color: var(--fit-red-dark);
}

.bg-fit-purple {
    background: var(--fit-purple) !important;
    color: var(--fit-white);
}

.bg-fit-purple-dark {
    background: var(--fit-purple-dark) !important;
    color: var(--fit-white);
}

.bg-fit-purple-light {
    background: var(--fit-purple-light) !important;
    color: var(--fit-purple-dark);
}

.bg-fit-blue {
    background: var(--fit-blue) !important;
    color: var(--fit-white);
}

.bg-fit-blue-dark {
    background: var(--fit-blue-dark) !important;
    color: var(--fit-white);
}

.bg-fit-blue-light {
    background: var(--fit-blue-light) !important;
    color: var(--fit-blue-dark);
}

.bg-fit-brown {
    background: var(--fit-brown) !important;
    color: var(--fit-white);
}

.bg-fit-brown-dark {
    background: var(--fit-brown-dark) !important;
    color: var(--fit-white);
}

.bg-fit-brown-light {
    background: var(--fit-brown-light) !important;
    color: var(--fit-white);
}

.bg-fit-pink {
    background: var(--fit-pink) !important;
    color: var(--fit-white);
}

.bg-fit-pink-dark {
    background: var(--fit-pink-dark) !important;
    color: var(--fit-white);
}

.bg-fit-pink-light {
    background: var(--fit-pink-light) !important;
    color: var(--fit-pink-dark);
}

.bg-fit-black {
    background: var(--fit-black) !important;
    color: var(--fit-white);
}

.bg-fit-black-dark {
    background: var(--fit-black-dark) !important;
    color: var(--fit-white);
}
/* 字體顏色-ardswc246 */
.text-ardswc246-blue {
    color: var(--ardswc246-blue-dark) !important;
}

.text-ardswc246-blue-light {
    color: var(--ardswc246-blue) !important;
}
/* 文字顏色-fit */
.text-fit-green {
    color: var(--fit-green) !important;
}

.text-fit-green-dark {
    color: var(--fit-green-dark) !important;
}

.text-fit-green-light {
    color: var(--fit-green-light) !important;
}

.text-fit-yellow {
    color: var(--fit-yellow) !important;
}

.text-fit-yellow-dark {
    color: var(--fit-yellow-dark) !important;
}

.text-fit-yellow-light {
    color: var(--fit-yellow-light) !important;
}

.text-fit-orange {
    color: var(--fit-orange) !important;
}

.text-fit-orange-dark {
    color: var(--fit-orange-dark) !important;
}

.text-fit-orange-light {
    color: var(--fit-orange-light) !important;
}

.text-fit-red {
    color: var(--fit-red) !important;
}

.text-fit-red-dark {
    color: var(--fit-red-dark) !important;
}

.text-fit-red-light {
    color: var(--fit-red-light) !important;
}

.text-fit-purple {
    color: var(--fit-purple) !important;
}

.text-fit-purple-dark {
    color: var(--fit-purple-dark) !important;
}

.text-fit-purple-light {
    color: var(--fit-purple-light) !important;
}

.text-fit-blue {
    color: var(--fit-blue) !important;
}

.text-fit-blue-dark {
    color: var(--fit-blue-dark) !important;
}

.text-fit-blue-light {
    color: var(--fit-blue-light) !important;
}

.text-fit-brown {
    color: var(--fit-brown) !important;
}

.text-fit-brown-dark {
    color: var(--fit-brown-dark) !important;
}

.text-fit-brown-light {
    color: var(--fit-brown-light) !important;
}

.text-fit-pink {
    color: var(--fit-pink) !important;
}

.text-fit-pink-dark {
    color: var(--fit-pink-dark) !important;
}

.text-fit-pink-light {
    color: var(--fit-pink-light) !important;
}

.text-fit-black {
    color: var(--fit-black) !important;
}

.text-fit-black-dark {
    color: var(--fit-black) !important;
}
/* 藍色漸層 */
.bg-blue-gradient {
    background: linear-gradient( 135deg, rgba(75, 186, 255, 1), rgba(23, 116, 209, 1) );
    color: var(--fit-white);
}