body {
    background: #f9f9f9;
    font-family: 'Arial', '微軟正黑體', sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .mtr_container {
    width: 2000px;
    display: flex;
    gap: 20px;       /* 區塊間距 */
  }
  .box {
    flex: 1;         /* 平均分配寬度 */
    border: 1px solid #333;
    height: auto;    /* 高度自動，依內容撐開 */
    box-sizing: border-box; /* 含內邊距和邊框 */
  }
  
  .mtr-map {
    /* background: #fff; */
    /* border-radius: 10px; */
    /* box-shadow: 0 2px 8px #0002; */
    padding-bottom: 20px;
    position: relative;
  }
  
  .header {
    color: #fff;
    padding: 18px 0 12px 0;
    text-align: left;
    position: relative;
    background: var(--background-color);
  }
  
  #mtr-lines .header .title {
    display: inline-block;
    font-size: 28px;
    margin-left: 18px;
    padding-top: 20px;
    vertical-align: middle;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: right;
    margin-top: -20px;
  }
  
  #mtr-lines .header .subtitle {
    display: block;
    font-size: 16px;
    margin-left: 18px;
    font-weight: normal;
    margin-top: -2px;
    margin-bottom: 10px;
    text-align: left;
  }
  
  .header .title {
    display: block;           /* 改成區塊元素，方便置中 */
    font-size: 28px;
    margin: 10px auto 0 auto; /* 上方 20px，左右自動置中，底部 0 */
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;       /* 文字置中 */
    vertical-align: middle;  
     /* 這行可保留或刪除 */
  }
  
  .header .subtitle {
    display: block;
    font-size: 16px;
    margin: -2px auto 10px auto; /* 上5px、左右自動置中、下10px */
    font-weight: normal;
    text-align: center;       /* 文字置中 */
  }
  .line-container {
      /*       margin-left: 115px; */
      padding-top: 20px;
      position: relative;
  }
  
  
  :root {
    --station-height: 65px;
  }
  
  .station {
    position: relative;
    min-height: var(--station-height);
    z-index: 2;
  }
  
  .station-dot {
    position: absolute;
    /* Adjust this value to position the dot at the bottom of the line */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Adjust to center */
    width: 24px;
    height: 24px;
    background: #fff;
    /*     border: 4px solid #a23b95; */
    border: 4px solid #000000;
    border-radius: 80%;
    z-index: 3;
   background: transparent;
  }
  
  .station-dot::after {
    content: '';
    position: absolute;
    left: 50%;
    /* Center it horizontally */
    top: 100%;
    /* Position below the dot */
    transform: translateX(-50%);
    /* Center the line */
    width: 10px;
    /* Width of the line */
  /*     height: 55px; */
    height: var(--station-height);
    height: calc(var(--station-height) - 24px);
    /* Length of the line */
    background: var(--background-color);
    border-radius: 6px;
    z-index: -1;
    /* Place behind the dot */
  }
  
  .station-name {
    width: calc(50% - 100px);
    margin-left: 70px;
    font-size: 22px;
    color: #3a295a;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.1;
    text-align: right;
    margin-bottom: 0;
/*           border: 2px dotted black; */
  }
  
  .station-en {
      width: calc(50% - 100px);
      margin-left: 70px;
      font-size: 14px;
      color: #333;
      margin-top: -1px;
      margin-bottom: 2px;
      text-align: right;
      z-index: 10;
/*           border: 2px dotted black; */
    white-space: nowrap;
    overflow: visible;  
  }
  
  /* .line-container  */
  .station:last-child .station-dot::after {
      display: none;
  }
  
  
  .station-link {
      left: calc(50% - 50px);
      font-size: 12px;
      color: black;
      /*     background: transparent; */
      border-radius: 8px;
      padding: 1px 6px;
      margin-left: 90px;
      margin-top: -40px;
      vertical-align: middle;
      position: relative;
      z-index: 2;
      line-height: 1.2;
      width: 100px;
  
      white-space: nowrap;
      /* 文字不換行 */
      overflow: visible;
      /* 允許溢出顯示在外面 */
  
    line-height: 1;
    padding-top: 2px;
    padding-bottom: 3px;
      /* Control line height for spacing */
    /*           border: 2px dotted black; */
  }
  
  .station-link::before {
      content: '';
      position: absolute;
      left: -30px;
      /* Adjust based on the desired length*/
      top: 8px;
      /* Adjust for vertical positioning */
      width: 30px;
      height: 12px;
      /* Line thickness */
      background: var(--background-color);
      /* Use the variable */
      border-radius: 6px;
      z-index: 3;
      /* Place behind the text */
  ;
  }
  
  
  /* phase 2 */
  
  .station-pill2 {
      height: 90px;
  }
  
  .station-pill2 div.station-dot {
      height: 50px;
      border-radius: 18px;
  }
  
  .station-pill3 {
      height: 120px;
  }
  
  .station-pill3 div.station-dot {
      height: 80px;
      border-radius: 18px;
  
  }
  
  .station-pill2 div.station-name {
      padding-top: 10px;
  }
  
  .station-pill3 div.station-name {
      padding-top: 30px;
  }
  
  .station-pill2 div.station-link {
      margin-top: -54px;
  }
  
  .station-pill3 div.station-link {
      margin-top: -72px;
  }
  
  .station-pill2 div.station-link+.station-link,
  .station-pill3 div.station-link+.station-link {
      margin-top: -0px;
  }
  
  /* phase 3 */
  
  
  .interchange.station-pill2 {
      height: 80px;
  }
  .interchange div.station-dot {
      margin-top: -0px;
      left: calc(50% + 50px);
  }
  
   .interchange .station-dot::after {
    width: 22px;
    border-top: 2px dotted black;
    top: 10px;
    left: -12px;
    background:none;
    z-index: -1;
  }
  .interchange.station-pill2 .station-dot::after {
    top: 20px;
  }
  
  
  
  .interchange div.station-name {
      position: absolute;
      left: 50%;
      margin-left: 40px;
      margin-top: 30px;
      text-align: left;
      z-index: 10;
  }
  .interchange.station-pill2 div.station-name {
      position: absolute;
      left: 50%;
      margin-left: 40px;
      margin-top: 50px;
      text-align: left;
      z-index: 10;
    
/*       border: 2px dotted black; */
  }
  .interchange.top .station-name {
    margin-top: -35px;
  }
  .interchange div.station-en {
      position: absolute;
      left: 50%;
      margin-left: 40px;
      text-align: left;
      margin-top: 50px;
      
/*     border: 2px dotted black; */
  }
  .interchange.station-pill2  div.station-en {
      position: absolute;
      left: 50%;
      margin-left: 40px;
      text-align: left;
      margin-top: 80px;
  }
  .interchange.top .station-en {
    margin-top: -15px;
  }
  .interchange div.station-link {
      margin-left: 145px;
  }
  
  
  
  /* phase 4 */
  
  .station:last-child .interchange div.station-dot {
      top: 30px;
      margin-top: 20px;
      left: calc(50%);
      top: 60px; 
  }
  
  .station:last-child .interchange div.station-link {
    margin-left: 90px;
    top: 90px;
  }
  
  .station:last-child .interchange.station-pill2 div.station-link {
    top: 105px;
  }
  
  .station:last-child .interchange.station-pill3 div.station-link {
    top: 125px;
  }
  
  .station:last-child .interchange div.station-dot::before {
      content: '';
      position: absolute;
      left: 7px; /* Adjust position as needed */
      top: -24px; /* Move the line above */
      width: 6px; /* Set width to 5px */
      height: 24px; /* Adjust height as needed */
      background-color: black; /* Set color to black */
    background-image: none; /* 新增這行以取消背景圖 */
      z-index: -1;
    
    height: 55px;
    top: -55px;
  }
  
  .station:last-child .interchange div.station-name {
      margin-top: 60px;
      z-index: 10;
      left: 0%;
      width: calc(50% - 30px);
      margin-left: 0px;
      text-align: right;
      margin-bottom: 0;
    margin-top: 90px;
  }
  .station:last-child .interchange.station-pill2 div.station-name {
    margin-top: 105px;
  }
  .station:last-child .interchange.station-pill3 div.station-name {
    margin-top: 115px;
  }
  
  .station:last-child .interchange div.station-en {
      left: 0%;
  
      width: calc(50% - 30px);
      margin-left: 0px;
      margin-bottom: 2px;
      text-align: right;
      z-index: 10;
    margin-top: 110px;
  
  }
  .station:last-child .interchange.station-pill2 div.station-en {
     margin-top: 135px;
  }
  .station:last-child .interchange.station-pill3 div.station-en {
     margin-top: 165px;
  }
  
  .station-dot:hover {
      background: #c4e298;
  }
  
  
  .line-airportexpress {
      --background-color: #1c7670;
  }
  
  .line-disneylandresort {
      --background-color: #f550a6;
  }
  
  .line-eastrail {
      --background-color: #53b7e8;
  }
  
  .line-island {
      --background-color: #0860a8;
  }
  
  .line-kwuntong {
      --background-color: #1a9431;
  }
  
  .line-southisland {
      --background-color: #b5bd00;
  }
  
  .line-tseungkwano {
      --background-color: #6b208b;
  }
  
  .line-tsuenwan {
      --background-color: #ff0000;
  }
  
  .line-tuenma {
      --background-color: #9a3b26;
  }
  
  .line-tungchung {
      --background-color: #fe7f1d;
  }
  
  .line-westrail {
      --background-color: #91107E
  }
  
  .line-disneylandresort {
      --background-color: #f550a6;
  }
  
  .line-lightrail {
      --background-color: #bfa23c;
  }
  
  .line-maonshan {
      --background-color: #9E4F18;
  }
  
  ons-speed-dial-item {
    background: var(--background-color) !important;
    color: white !important;
  }