/* 深色模式切換按鈕樣式 */
.dark-mode-toggle {
    position: fixed;
    right: 0;
    top: 50%;
    width: 50px;
    height: 50px;
    background-color: #6868AC;
    border-radius: 25px 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dark-mode-toggle i {
    font-size: 20px;
    color: #fff;
}

/* 夜間模式切換樣式 */
body.dark-mode {
    --mainColor: #F7C600;
    --subColor: #4D4D8C;
    --menuTxt: #BCC0C5;
    --pageTxt: #E0E5E9;

    /* Bootstrap 色碼 */
    --bs-primary: #F2B800;
    --bs-secondary: #F1C40F;
    --bs-success: #F2B800;
    --bs-warning: #B0B0B0;
    --bs-danger: #E74C3C;
    --bs-light: #B59B6D;
    --bs-dark: #F8F9FA;
    --bs-info: #17a2b8;
    --bs-body-color: #E0E5E9;

    /* 灰色系列 */
    --bs-gray-100: #212529;
    --bs-gray-200: #343a40;
    --bs-gray-300: #495057;
    --bs-gray-400: #6c757d;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
}

body.dark-mode .dark-mode-toggle {
    background-color: #FFE602;
}

body.dark-mode .dark-mode-toggle i {
    color: black;
}

html body.dark-mode {
    background-color: var(--bs-gray-900) !important;
}

body.dark-mode .navTop__fontSize.align-items-center .fontLabel {
    color: var(--pageTxt) !important;
}

body.dark-mode .webList .d-flex.justify-content-center .name.list-none {
    color: var(--pageTxt);
}

body.dark-mode .bgColor {
    background-color: var(--bs-gray-900) !important;
}

body.dark-mode header {
    background: #6868AC;
}

body.dark-mode .nav-link.text-center.default-menu {
    color: #212529 !important;
}

body.dark-mode .nav-b-container .nav-text:hover {
    color: #212529 !important;
}

body.dark-mode .header__logo img {
    filter: invert(1); /* 將黑色反轉為白色 */
}

body.dark-mode .header__logo p strong {
    color: var(--pageTxt);
}

.caseIntro {
    background-color: rgb(255 255 255 / 80%) !important;
}

body.dark-mode .caseIntro .caseLeft .bigTxt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseLeft .txt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseRight .bigTxt {
    color: #212529 !important;
}

body.dark-mode .caseIntro .caseRight .caseList li span {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .txt p {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .date {
    color: #212529 !important;
}

body.dark-mode .gridZone.gridZone--end .galleryBox.container .galleryBox__inner .galleryInfo.container .infoBtm .tags a {
    color: #1F4F7F !important;
}

body.dark-mode .mainNavLink.active .navText {
    color: #212529;
}

body.dark-mode .mainNav .mainNav__item span {
    color: var(--pageTxt);
}

body.dark-mode .mainNav__item--last:before {
    background: var(--pageTxt);
}

body.dark-mode .grid-zone.gridZone--video .gridTxt .gridInfo .date {
    color: #333 !important;
}

body.dark-mode .mainNavLink.active .navText:hover {
    color: #333;
}

body.dark-mode .mainNavLink:hover, .mainNavLink.active {
    background-color: #fff;
}

body.dark-mode .mainNav__item--last:before {
    background: #fff;
}

body.dark-mode .mainNavLink span {
    color: var(--pageTxt);
}

body.dark-mode .mainNavLink span:hover {
    color: #333 !important;
}

body.dark-mode .mainNavLink.active span {
    color: #333 !important;
}

body.dark-mod .mainNav__item span:first-of-type {
    color: var(--pageTxt);
}

body.dark-mod .mainNav__item--last:before {
    background: var(--pageTxt);
}

body.dark-mode .nav-link.text-center:hover .nav-text {
    color: #333 !important;
}

.overlay {
    background-color: #FFE602;
}

body.dark-mode .overlay {
    background-color: #6868AC;
}

body.dark-mode .container.banner-txt p {
    color: var(--pageTxt);
}

body.dark-mode .container .loginBox .info p {
    color: var(--pageTxt);
}

body.dark-mode .btnStyle {
    background: #6868AC;
    border: 1px solid #6868AC;
    color: #fff;
}

body.dark-mode .btnStyle:hover, .btnStyle:active {
    background-color: #fff;
    color: #6868AC;
    border: 1px solid #6868AC;
}

body.dark-mode .announce-box {
    background-color: rgb(104 104 172 / 30%);
    border: 1px solid #6868AC;
}

body.dark-mode .announce-box p {
    color: var(--pageTxt);
}

body.dark-mode .announce-box .type {
    background-color: #6868AC !important;
    color: var(--pageTxt);
}

body.dark-mode .announce-box img {
    filter: invert(1); /* 將黑色反轉為白色 */
}

body.dark-mode .webBox .webBox__end .people {
    color: var(--pageTxt);
}

body.dark-mode .memTop__inner .leftBox {
    background: var(--bs-gray-100);
}

body.dark-mode .memTop__inner .leftBox h3 strong {
    color: var(--pageTxt);
}

body.dark-mode .listStyle--line li:first-child:before {
    background: var(--pageTxt);
}

body.dark-mode .bi-search::before {
    color: var(--pageTxt);
}

body.dark-mode .listStyle--line li:after {
    background: var(--pageTxt);
}

body.dark-mode .memBtm {
    border-top: 1px solid var(--pageTxt);
}

body.dark-mode .searchBox {
    border: 1px solid var(--pageTxt);
}

body.dark-mode .mainTit {
    color: var(--subColor);
}

body.dark-mode .changeBox {
    color: #212529;
}

body.dark-mode .td-score input {
    color: #fff;
    background-color: #333;
    border: 1px solid #fff;
    text-align: center;
}

body.dark-mode .formGroup__input label b {
    color: var(--pageTxt);
}

body.dark-mode .container.text-center .fw-bold {
    color: var(--pageTxt);
}

body.dark-mode .cancel {
    background: #6868AC;
    border: 1px solid #6868AC;
    color: #fff;
}

body.dark-mode .cancel:hover {
    background: #fff;
    border: 1px solid #6868AC;
    color: #6868AC;
}

body.dark-mode .changeBox.active {
    background: #6868AC;
    color: #fff;
}

body.dark-mode .webBox {
    border: 1px solid var(--pageTxt);
}

body.dark-mode .webBox .name {
    color: #fff;
}

body.dark-mode .webBox .intro {
    color: #fff;
}

body.dark-mode .pagination > li a {
    color: #fff;
}

body.dark-mode .pagination > li.on a {
    background: #6868AC !important;
    color: #fff !important;
}

body.dark-mode .newWeb {
    border-top: 1px solid var(--pageTxt);
}

body.dark-mode .mainTitle {
    color: #fff;
}

body.dark-mode .pageTop {
    border-bottom: 1px solid var(--pageTxt);
}

body.dark-mode .contentInner b, strong {
    color: var(--pageTxt);
}

body.dark-mode .contentInner p span {
    color: var(--pageTxt);
}

body.dark-mode table span {
    color: var(--pageTxt);
}

body.dark-mode hr {
    color: var(--pageTxt);
}

body.dark-mode .contentInner h3 {
    color: var(--pageTxt);
}

body.dark-mode ::marker {
    color: var(--pageTxt);
}

body.dark-mode .contentInner li {
    color: var(--pageTxt);
}

body.dark-mode .contentInner h5 {
    color: var(--pageTxt);
}

body.dark-mode .container h2 {
    color: #fff;
}

body.dark-mode .txt p {
    color: var(--pageTxt);
}

body.dark-mode .stepNum.active {
    background: #6868AC;
    color: var(--pageTxt);
}

body.dark-mode .stepNum {
    background: var(--menuTxt);
    color: #000;
}

body.dark-mode .formContent {
    border-top: 1px solid var(--pageTxt);
}

body.dark-mode .formContent .container p {
    color: var(--pageTxt);
}

body.dark-mode .formGroup__item label {
    color: var(--pageTxt);
}

body.dark-mode .bgColor .blockHeight .popUp .popUp__inner form .formGroup__item label {
    color: #212529 !important;
}

body.dark-mode .content small {
    color: var(--pageTxt);
}

body.dark-mode .content small a {
    color: var(--pageTxt);
}

body.dark-mode .btnStyle__zone {
    border-top: 1px solid var(--pageTxt);
}

body.dark-mode .reportDetail .container .btnStyle__zone.btnStyle__zone--noline {
    border-top: none !important;
}

body.dark-mode .stepZone .stepList:before {
    background: #6868AC;
}

body.dark-mode .question-group h3 {
    color: #fff;
}

body.dark-mode .checkForm__item .square {
    border: 2px solid #6868AC;
    color: var(--pageTxt);
}

body.dark-mode .checkForm__item label {
    color: var(--pageTxt);
}

body.dark-mode th {
    color: var(--pageTxt);
}

body.dark-mode td {
    color: var(--pageTxt);
}

body.dark-mode td input {
    color: var(--pageTxt);
    border: 1px solid var(--pageTxt);
    color: var(--pageTxt);
}

body.dark-mode .basicItem span {
    color: var(--pageTxt);
}

body.dark-mode .annouceBox {
    background: rgb(104 104 172 / 30%);
    border: 1px solid #6868AC;
}

body.dark-mode .annouceBox p {
    color: var(--pageTxt);
}

body.dark-mode .tableStyle thead {
    color: var(--subColor);
}

body.dark-mode .formGroup__item .content .telBox span {
    color: var(--pageTxt);
}

body.dark-mode .footer-info a:hover {
    background-color: #fff;
    color: #212529;
}

body.dark-mode .finalContent .container.text-center div {
    color: var(--pageTxt);
}