html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}




header {
    margin-bottom: 0;
}

div {
    margin-top: 0;
}

form {
    width: 100%;
}
/* 表格样式 */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0px 0;
    box-shadow: 0 2px 5px #c0c0c0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: #c0c0c0 1px solid;
}

/* 表头样式 */
.h11 {
    background: #00AEAE;
    color: #000;
    line-height: 25px;
    padding: 0 0 0 5px;
}

    /* 表头样式 */
    .h11 a {
        background: #00AEAE;
        color: white;
        text-decoration: none;
    }
/* 表头样式 */
.h12 {
    background: #3C3C3C;
    color: white;
    line-height: 25px;
    padding: 0 0 0 5px;
}

    /* 表头样式 */
    .h12 a {
        background: #3C3C3C;
        color: white;
        text-decoration: none;
    }

.ind11 {
    font-size: 14px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border-right: #c0c0c0 1px solid;
    border-top: #c0c0c0 1px solid;
    border-left: #c0c0c0 1px solid;
    border-bottom: #c0c0c0 1px solid;
    background-color: #ffffff;
    line-height: 25px; /* 行高设置为与容器高度相同 */
}

.w5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.t3 {
    font-size: 16px;
    color: #000000;
    font-family: 微軟正黑體;
    filter: progid:dximagetransform.microsoft.gradient (gradienttype=0, startcolorstr=#cbe1f7, endcolorstr=#e3edf8);
    border: #9D9D9D 1px solid;
    background-color: #D2E9FF;
    text-align: left;
}

.t4 {
    font-size: 12px;
    color: #000000;
    font-family: 微軟正黑體;
    filter: progid:dximagetransform.microsoft.gradient (gradienttype=0, startcolorstr=#cbe1f7, endcolorstr=#e3edf8);
    border: #9D9D9D 1px solid;
    background-color: #FFFFCE;
    height: 20px;
}

.t1 {
    border-collapse: collapse;
    background-color: #ffffff;
    color: #000000;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    border-right: #c2d7ec 1pt solid;
    border-top: #c2d7ec 1pt solid;
    border-left: #c2d7ec 1pt solid;
    border-bottom: #c2d7ec 1pt solid;
}

.chart-container {
    position: relative;
    height: 300px;
    margin: 0 auto;
    padding: 20px 0;
    width: 100%;
    min-width: 300px;
    background-color: rgb(247, 255, 255);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.milestone {
    position: absolute;
    text-align: center;
    min-width: 100px;
    max-width: 100px;
    padding: 2px;
    background-color: #494719; /*64A600*/
    color: #162df9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    white-space: normal;
    z-index: 2;
    background: #e4f3ff; /*rgb(211, 255, 147)*/
    border: #3aebff 1px dashed;
}

    .milestone:hover {
        z-index: 10;
        transform: scale(1.05);
        background-color: #00CACA; /*009100*/
    }

.line {
    position: absolute;
    height: 8px;
    background-color: #ccc;
    top: 50%;
    left: 50%;
    width: 98%;
    transform: translateX(-50%);
    z-index: 1;
}

.connector {
    position: absolute;
    width: 2px;
    background-color: #ccc;
    z-index: 1;
    transform: translateX(-50%);
    background-color: #9D9D9D;
}

.milestone-label {
    margin-top: 0px;
    font-size: 11px;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    min-width: 60px;
    max-width: 130px;
    /*position: relative;*/
}


/* 自訂 legend 樣式 */
fieldset legend.custom-legend {
    background-color: #343a40; /* 深灰背景 */
    color: #fff; /* 白字 */
    padding: 0.3rem 0.8rem;
    border-radius: 10pt;
    font-size: 1.2rem;
}

/* 自訂 fieldset 外框顏色 */
fieldset.custom-fieldset {
    border: 2px solid #343a40; /* 深灰邊框 */
    width: 100% auto; /* 保證寬度 100% */
    margin: 0 auto; /* 居中 */
}
/* Fieldset 内容 */
.fieldset-content {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
}

    .fieldset-content label {
        font-size: 12px;
        margin-bottom: 0px;
        font-weight: bold;
        color: #333;
    }

    .fieldset-content input,
    .fieldset-content select,
    .fieldset-content textarea {
        padding: 2px;
        margin-bottom: 0px;
        font-size: 12px;
        border: 1px solid #0066CC;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
    }

        /* 聚焦时的边框颜色 */
        .fieldset-content input:focus,
        .fieldset-content select:focus,
        .fieldset-content textarea:focus {
            border-color: #00AEAE; /* 聚焦时的颜色 */
            box-shadow: 0 0 8px rgba(0, 174, 174, 0.5); /* 聚焦时的光环效果 */
            outline: none;
        }


/* 頂部橫幅區塊 */
.top-banner {
    background-image: url('../img/Top.jpg');
    background-size: cover;
    background-position: center;
    height: 160px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    font-weight: bold;
}

.navbar-custom {
    background-color: #e0e0e0; /* 深灰色 */
    color: #000000;
}

    .navbar-custom .nav-link {
        color: #000000;
    }

        .navbar-custom .nav-link:hover,
        .navbar-custom .nav-link:focus {
            color: #333333; /* 滑過變稍深 */
        }

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.dropdown.show > .nav-link {
    border-bottom: 3px solid red;
    transition: border-bottom 0.2s ease;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #f8f9fa !important; /* 淺灰底 */
    color: #212529; /* 深文字 */
}


a {
    text-decoration: none;
    transition: color 0.3s;
    color: black;
}

    a:hover {
        color: #FF0000;
    }

.custom-input {
    background-color: #f8f9fa; /* 淺灰背景 */
    border-radius: 5px; /* 圓角邊框 */
    border: 1px solid #ced4da; /* Bootstrap 標準灰邊 */
    padding: 0rem 0rem;
}

    .custom-input:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        outline: none;
    }

.single-line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: left;
    color: grey;
}

.nav-pills .nav-link:hover {
    background-color: #343a40;
    color: #fff;
}

.nav-pills .nav-link.active {
    background-color: #343a40;
    color: #fff;
}

.nav-pills .nav-link {
    color: #000; /* 黑色字 */
    font-weight: bold; /* 加粗 */
    /*border: 2px solid #e0e0e0;
    border-radius: 5px;*/
}


.mega-dropdown {
    display: block;
    background: #f8f9fa;
    z-index: 1050;
    padding: 0.5rem 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

    .mega-dropdown.show {
        opacity: 1;
        visibility: visible;
    }


.mega-content {
    display: none;
}

    .mega-content.active {
        display: block;
    }

@media (min-width: 992px) {
    .mega-dropdown {
        position: fixed;
        top: 56px;
        left: 0;
        width: 100vw;
    }
}

.tableBox {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 20px;
}

@media (max-width: 991.98px) {
    .mega-dropdown {
        position: absolute;
        width: 100%;
        background: #fff;
    }
}


.chart-container1 {
    position: relative;
    width: 100%;
    height: 420px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .chart-container1 {
        height: 520px;
    }
}