.infoButton {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: transparent;
     border: none;
     cursor: pointer;
     font-size: 24px;
 }

 .ShareButton {
     position: absolute;
     top: 10px;
     left: 10px;
     background-color: transparent;
     border: none;
     cursor: pointer;
     font-size: 24px;
 }

 /* The Modal (background) */
 .mymodal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 3;
     /* Sit on top */
     padding-top: 100px;
     /* Location of the box */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
 }

 /* Modal Content */
 .mymodal-content {
     position: relative;
     background-color: #fefefe;
     margin: auto;
     padding: 0;
     border: 1px solid #888;
     width: 80%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
     animation-name: animatetop;
     animation-duration: 0.4s
 }

 /* Add Animation */
 @-webkit-keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }

     to {
         top: 0;
         opacity: 1
     }
 }

 @keyframes animatetop {
     from {
         top: -300px;
         opacity: 0
     }

     to {
         top: 0;
         opacity: 1
     }
 }

 /* The Close Button */
 .close {
     color: white;
     float: right;
     font-size: 28px;
     font-weight: bold;
 }

 .close:hover,
 .close:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
 }

 .mymodal-header {
     padding: 2px 16px;
     background-color: #009bff;
     color: white;
 }

 .mymodal-body {
     padding: 2px 16px;
 }

 .mymodal-footer {
     padding: 2px 16px;
     background-color: #009bff;
     color: white;
 }

 input:not(:checked)+label[class*="btn-outline-primary"]:hover.mobile-device {
     color: #0d6efd;
     background-color: white;
     border-color: #0d6efd;
 }

 input:not(:checked)+label[class*="btn-outline-success"]:hover.mobile-device {
     color: #198754;
     background-color: white;
     border-color: #198754;
 }

 input:not(:checked)+label[class*="btn-outline-danger"]:hover.mobile-device {
     color: #dc3545;
     background-color: white;
     border-color: #dc3545;
 }

 input:not(:checked)+label:hover {
     color: white;
     background-color: #6c757d;
     border-color: #6c757d;
 }

 #flowStpRst {
     color: white;
 }

 /* --- 1. 矩陣 Matrix (方塊狀)：適合 RWD 縮放 --- */
 #divMatrix {
    display: block !important;
    
    /* 1. 設定寬度與置中 */
    width: 100%;           /* 基本上佔滿 */
    max-width: 1100px;     /* [關鍵] 最大只到 1100px (可依喜好調整 800~1200) */
    margin: 0 auto;        /* [關鍵] 讓容器在畫面中水平置中 */
    
    /* 2. 處理手機版捲動 */
    overflow-x: auto;      
    -webkit-overflow-scrolling: touch;
    
    /* 3. 視覺微調 */
    text-align: center;
    padding-bottom: 10px;  /* 預留卷軸空間 */
}

 #matrixCanvas {
    width: 100%;           /* 填滿上面的 max-width */
    height: auto;          /* 高度自動 */
    
    /* 手機版停損點： */
    /* 當螢幕縮到比 600px 還小時，Canvas 就不再縮小，改為讓外層出卷軸 */
    min-width: 600px;      
}

 /* --- 2. 時間軸 Timeline (長條狀)：不適合縮放，只適合捲動 --- */
 #divTimeline {
     display: block;
     width: 100%;
     overflow-x: auto;
     /* 關鍵：讓它產生橫向卷軸 */
     -webkit-overflow-scrolling: touch;
     text-align: left;
     /* 時間軸靠左對齊通常比較自然 */
     padding-bottom: 10px;
     /* 預留一點空間給卷軸 */
 }

 #timeLineCanvas {
     /* 關鍵修正：取消 width: 100% */
     /* 讓 Canvas 保持程式算出來的原始寬度 */
     width: auto !important;
     height: auto !important;

     /* 確保不會被外層容器強制壓縮 */
     max-width: none !important;

     /* 這是為了避免 Canvas 下方出現不明空隙 */
     display: block;
 }