.fc .navbar-height {
    height: 52px;
    padding: 0px 0px 2px 0px !important;
    background-color: rgba(255, 255, 255, 0.95);
  }
  
  .fc .navbar-height .btn-light {
    background-color: rgba(255, 255, 255, 0.95);
    border-color:transparent;  
  }
  
  .fc .navbar-height .btn-light:hover {
    background-color: #f3f4f6;
  }
  
  .fc .navbar-height .title {
    color: #1e3a8a;
  }
  
  .fc .fixed-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 30px;
    flex:1;
    position: relative;
    top: 1px;
  }
  
  .fc .no-break {
    white-space: nowrap;
    word-break: keep-all;
    /* width: 90px;
    text-align: right; */
  }
  
  .fc .mode-label-fs-6 {
    font-size: 14px !important;
  }
  
  .fc .title {
    color: #20548F;
    word-break: keep-all;
    white-space: nowrap;
  }
  
  .fc .main-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:39px 15px 0px 15px;
    flex:1;
  }
  
  .fc .test-div {
    display: flex;
    align-items: center;
    justify-content: center;  
    width: 100%;
    flex-wrap: wrap;
  }
  
  .fc .test-div-result {
    width: 100%;
  }
  
  
  .fc .ip-div {
    display: flex;
    align-items: stretch;
    justify-content: center;  
    flex:1;
    margin:10px 0 0 0;
    width: 100%;
  }
  
  .fc .ip-div-modal { 
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-flow: column;
    flex:1;
    margin:0 0 0 0;
    width: 100%;
  }
  
  .fc .div-test-run {
    display: flex;
    align-items: center;
    justify-content: center;  
    flex:1;
    margin:10px 0 0 0;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .fc .test-div-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .fc .text-center {
    text-align: center !important;
  }
  
  .fc .progressBarOuter {
    height: 5px;
  }
  
  .fc .progressBar {
    width: 100%;
    background-color: #20548F;
  }
  
  .fc .logo {
    width: 36px;
  }
  
  .fc svg {
    position: relative;
    top: -2px
  }
  
  .fc svg.svg-top-1 {
    top: -1px;
  }
  
  .fc svg.svg-top-0 {
    top: 0px;
  }
  
  .fc sub {
    font-weight: bold;
  }
  
  .fc sup {
    font-weight: bold;
  }
  
  .fc .no-break {
    white-space: nowrap;
    word-break: keep-all;
  }
  
  .fc button {
    position: relative;
    word-break: keep-all;
    white-space: nowrap;
  }
  
  .fc .btn-light-1 {
    background-color: #d3d4d5
  }
  
  .fc .note-btn-width {
    /* width: 150px;     */
    font-weight: bold;
    white-space: pre-wrap;
    word-break: break-all;
  }
  
  .fc .menu {
    display: none;
  }
  
  .fc .dropdown-divider-hidden0 {
    display: none;
  }
  
  .fc .dropdown-divider-hidden1 {
    display: none;
  }
  
  .fc .dropdown-divider-hidden2 {
    display: none;
  }
  
  .fc .dropdown-divider-hidden3 {
    display: none;
  }
  
  .fc .dropdown-divider-hidden4 {
    display: none;
  }
  
  .fc .dropdown-mode-item {
    display: none;
  }
  
  .fc .dropdown-group-item {
    display: none;
  }
  
  .fc .dropdown-history-item {
    display: none;
  }
  
  .fc .dropdown-download-item {
    display: none;
  }
  
  .fc .dropdown-login-item {
    display: none;
  }
  
  .fc .ip-w-25 {
    width: 65px !important;
    text-align: right;
    margin-right: 4px;
  }
  
  .fc .card-ellipsis {
    word-break: break-all;
    white-space: wrap;
  }
  
  .fc .ip-card-adjust {
    flex: 1;
    width: 100%;
  }
  
  .fc .ip-card-adjust.first { 
    margin-right: 10px;
  }
  
  .fc .ip-card-adjust-modal {
    flex: 1;
    width: 100%;
  }
  
  /* --- */
  .fc .card-body {
    padding: 0.7rem;
  }
  
  .fc .select-div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex:1;
    flex-wrap: wrap;
  }
  
  .fc .select-div-split {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
    min-width: 200px;
    margin: 2px;
    padding: 5px;
  }
  
  .fc .select-div-split.column  {
    flex-flow: column;  
    max-width: 200px;
  }
  
  .fc .select-div-split .flex-flow-wrap {
    flex-flow: wrap;
  }
  
  .fc .select-item {
    width: 190px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .fc .select-item > span {
    margin-right: 2px;
  }
  
  .fc .select-item:hover {
    color: rgb(13,110,253);
    /* font-weight: bold; */
  }
  
  .fc .select-item.active {
    color: rgb(13,110,253);
    font-weight: bold;
  }
  
  .fc .select-item.highlight {
    text-shadow:1px 2px 10px #4d4d4d;
    font-weight: bold;
  }
  
  .fc .select-item.column-3 {
    width: 125px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .fc .card-header {
    font-weight: bold;
  }

  .fc .card-header > div {
    font-weight: bold;
    font-size: 20px;
  }

  .fc .connection-number-font-size {
    font-size: 20px;
  }

  /* .fc .group-number-width {
    width: 100px;
  }
   */
  
  .fc .speed-dash-card {
    width: 200px;
    flex: 0 0 auto;
    padding: 8px 0px 8px 0px;
  }
  
  .fc .speed-dash-card-info {
    flex: 1;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: #d97706;
    border-color: #d97706;
    /* border-left-width: 5px !important;
    border-right-width: 5px !important; */
  }
  
  .fc .speed-dash-card-info .card-header {
    position: absolute;
    top: -19px;
    padding: 0px;
    width: 100%;
  }
  
  .fc .speed-dash-card-info .card-body {
    padding-top: 14px;
    padding-bottom: 4px;
  }
  
  .fc .speed-dash-card .card-header {
    padding: 0.1rem;
  }
  
  .fc .speed-dash-card .card-body {
    padding: 0.1rem;
  }
  
  .fc .speed-dash-canvas {
    width: 100%;
    height: auto !important;
  }
  
  .fc .speed-dash-body {
    position: relative;
  }
  
  .fc .speed-dash-value {
    position: relative;  
    font-size: 20px;
    font-weight: bold;
  }
  
  /* .fc .test-description-card.success {
    background: linear-gradient(to right, #d1fae5, #dcfce7) !important;
    border-width: 2px !important;
    border-color: #a7f3d0 !important;
  }
  
  .fc .test-description-card.primary {
    background: linear-gradient(to right, #dbeafe, #e0e7ff) !important;
    border-width: 2px !important;
    border-color: #93c5fd !important;
  }
  
  .fc .test-description-card.danger {
    background: linear-gradient(to right, #fee2e2, #fecaca) !important;
    border-width: 2px !important;
    border-color: #fca5a5 !important;
  } */
  
  .fc .test-description-card h5 {
    font-size: 18px;
    font-weight: bold;
  }
  
  .fc .test-description-card .span-fs-12 {
    font-size: 12px;
  }
  
  .fc .test-description-card span {
    font-size: 16px;
  }
  
  .fc .test-memo-div {
    background-color: rgb(240, 240, 240) !important;
    border-radius: 5px;
    /* margin-left: 15px !important;
    margin-right: 15px !important; */
  }
  
  .fc .test-result-card {
    width: calc(25% - 8px);
    background-color: #f8f9fa;
  }
  
  .fc .test-result-card span[data-id="value"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 18px;
  }
  
  .fc .test-result-card span[data-id="grade"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
  
  .fc .test-result-card > div > div > span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 16px;
  }
  
  /* .fc .test-result-card div:nth-child(1) {
    padding-bottom: 0;
  } */
  
  .fc .test-result-card div:nth-child(3) {
    padding-top: 0;
  }
  
  .fc .test-result-card.w-33 {
    width: calc(33% - 8px);
  }
  
  .fc .test-result-card.w-34 {
    width: calc(33% - 8px);
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  .fc .test-result-card .span-fs-14 {
    font-size: 14px;
  }
  
  .fc .test-result-card .chart-container {
    width: 150px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .fc .test-result-card .chart-container-200 {
    /* width:100%; */
    /* min-height: 170px; */
    border: 0px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 8px;
  }
  
  .fc .ipv4-info {
    font-size: 14px;
    border-color: #e2e8f0 !important;
    border-left-width: 3px !important;
    border-left-color: #0d6efd !important;
    padding: 14px 8px 0px 8px;
  }
  
  .fc .ipv4-info:hover {
    border-color: #0d6efd !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }
  
  .fc .ipv6-info {
    font-size: 14px;
    border-color: #e2e8f0 !important;
    border-left-width: 3px !important;
    border-left-color: #198754 !important;
    padding: 14px 8px 0px 8px;
  }
  
  .fc .ipv6-info:hover {
    border-color: #198754 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }
  
  .fc .text-gray {
    color: #6b7280 !important;
  }
  
  .fc .ipHostWhois-div {
    padding: 6px 8px 4px 8px;
  }
  
  .fc .title-spinner-ip {
    width: 24px;
    height: 24px;
    position: relative;
  }
  
  .fc .title-spinner-ip > div {
    position: relative;
    top: -1px;
  }
  
  .fc .ip-info-label {
    width: 67px;
    text-align: right;
  }
  
  .fc .ip-info-table td {
    padding: 1px 0px 1px 0px;
  }
  
  .fc .test-table {
    font-size: 12px;
  }
  
  .fc .test-table th {
    border-right: 1px solid #dee2e6;
  }
  
  .fc .test-table th:first-child {
    width: 180px;
  }
  
  .fc .test-table th:not(:first-child) {
    width: 7%;
  }
  
  .fc .test-table th:last-child {
    border-right: none;
  }
  
  .fc .test-table td {
    border-right: 1px solid #dee2e6;
  }
  
  .fc .test-table td:last-child {
    border-right: none;
  }
  
  .fc .test-table tr:last-child {
    border-style: none;
  }
  
  .fc .test_result_icon {
    background: linear-gradient(135deg, #3b82f6, #4f46e5) !important;
    padding: 6px 5px 3px 5px !important;
  }
  
  .fc .test_description_icon {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  }
  
  .fc .speed-dash-title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .fc .bg-warning {
    background-color: #fef3c7 !important;
  }
  
  .fc .ping-icon-color {
    color: #7c3aed !important;
    stroke-width: 2 !important;
  }
  
  .fc .lost-icon-color {
    color: #ef4444 !important;
  }
  
  .fc .jitter-icon-color {
      color: #f59e0b !important;
  }
  
  .fc .download-icon-color {
    color: #3b82f6 !important;
  }
  
  .fc .upload-icon-color {    
    color: #10b981 !important;
  }

  .fc .animation-div {
    width: 100% !important;    
  }

  .fc .test-result-card {
    border-left-width : 5px !important;
    width: calc(100% - 8px) !important;
  }

  .fc .w-fixed-width {
    width: 300px !important;
  }

  .fc .status-div {
    font-size: 14px;
  }

  @media (max-width: 400px) {
    .fc .status-div {
      justify-content:center !important;
    }
  }

  @media (min-width: 1350px) {
    .fc .fixed-div {
      max-width: 1280px;
    }
    .fc .test-div {
      max-width: 1266px !important;
    }
    .fc .test-div-result {
      max-width: 1266px !important;
    }
    .fc .ip-div {
      max-width: 1266px !important;
    }
    .fc .div-test-run {
      max-width: 1266px !important;
    }
  }
  
  @media (max-width: 715px) {
    .fc .speed-result-zone {
      flex:1
    }
  
    .fc .speed-dash-card-info {
      width: calc(100% - 8px);
      flex: none;
    }

    .fc .speed-dash-card-info:nth-child(2) {
      margin-top: 30px !important;
    }

    .fc .speed-dash-card-info:nth-child(3) {
      margin-top: 30px !important;
    }

  }
  
  @media (max-width: 1169px) {
    .hiddenBook {
      display: none;
    }
  }
  
  @media (max-width: 1049px) {
    .fc .hiddenHistory {
      display: none;
    }
  }
  
  @media (max-width: 999px) {
    .fc .hiddenLogin {
      display: none;
    }
  
  }
  
  @media (max-width: 949px) {
    .fc .hiddenGroup {
      display: none;
    }
    .fc .test-result-card {
      width: calc(50% - 8px);
    }
  
  }
  
  @media (max-width: 939px) {
    .fc .hiddenMode {
      display: none;
    }
    
    .fc .dropdown-mode-item {
      display: block;
    }
  
    .fc .ip-card-adjust {
      display: none;
    }
  
  
    .fc .ip-div {  
      flex-flow: column;
    }
  
    .fc .ip-card-adjust.first { 
      margin-right: 0px;
    }
    .fc .ip-card-adjust.last { 
      margin-top: 10px;
    }
  }
  
  @media (max-width: 749px) {
    .fc .dropdown-login-item {
      display: block;
    }
    
    .fc .dropdown-divider-hidden4 {
      display: block;
    }

    .fc .speed-dash-card {
      width: 100%;
    }
  
    .fc .animation-div {
      width: 100% !important;
    }

    .fc .test-note-div-2 {
      flex-flow: column;
    }
  }
  
  @media (max-width: 479px) {

    .fc .menu {
      display: block;
    }
    
    .fc .hiddenLoginBtn {  
      display: none;
    }
    
    .fc .dropdown-download-item {
      display: block;
    }
    .fc .dropdown-divider-hidden3 {
      display: block;
    }
    .fc .hiddenBookBtn {  
      display: none;
    }
    .fc .test-div {
      flex-flow: column;
    }
    
    .fc .ip-card-adjust {
      display: none;
    }
  
    .fc .select-div-split.column  {
      flex-flow: column;  
      max-width: 100%;
    }
  
    
  .fc .btn-ip-switch {
    flex-wrap: wrap;
  }  
    
  
  }
  
  @media (max-height: 450px) {
    .fc .ip-card-adjust {
      display: none;
    }

  }
  
  @media (max-width: 559px) {
    .fc .hiddenHistoryBtn {  
      display: none;
    }
    .fc .dropdown-history-item {
      display: block;
    }
    .fc .dropdown-divider-hidden2 {
      display: block;
    }
    .fc .dropdown-group-item {
      display: block;
    }
    .fc .dropdown-divider-hidden1 {
      display: block;
    }
    .fc .hiddenGroupBtn {  
      display: none;
    }
  }
  
  @media (max-width: 899px) {
    .fc .test-result-card {
      width: calc(50% - 8px);
    }
  
    .fc .test-result-card.w-33 {
      width: calc(50% - 8px);
    }
  
    .fc .test-result-card.w-34 {
      width: calc(50% - 8px);
      margin-left: 4px !important;
      margin-right: 4px !important;
    }  
  
    .fc .test-chart-flex-wrap {
      flex-wrap: wrap;
    }
  }
  
  @media (max-width: 699px) {
    .fc .test-result-card {
      width: calc(100% - 8px) !important;
    }
  
    .fc .test-result-card.w-33 {
      width: calc(100% - 8px) !important;
    }
  
    .fc .test-result-card.w-34 {
      width: calc(100% - 8px);
      margin-left: 4px !important;
      margin-right: 4px !important;
    }
  }

  @media (max-width: 450px) {
    .fc .title-hidden {
      display: none !important;
    }
  }
  
  @media (max-width: 380px) {
    .fc .title span {
      font-size: 20px !important;
    }
    
    .fc .logo {
      width: 28px;
    }

  }
  
  @media (max-width: 350px) {
    .fc .title span {
      font-size: 18px !important;
    }
    
    .fc .logo {
      width: 26px;
    }  
    
  }
  
  @media (max-width: 320px) {
    .fc .title span {
      font-size: 16px !important;
    }
    
    .fc .logo {
      width: 24px;
    }
  
    .fc .speed-dash-card {
      width: 100%;
    }
  }
  
  @media (max-width: 280px) {
    .fc .title span {
      font-size: 14px !important;
    }
    
    .fc .logo {
      width: 22px;
    } 
  }
  
  @media (max-width: 1200px) {
    .fc #test-target-modal .modal-dialog {
      min-width: 90%;
    }
  }
  
  @media (max-width: 575px) {
    .fc #test-target-modal .modal-dialog {
      padding: 15px;
    }
  }

/* 下拉選單區與設備數區樣式 */
.fc #test-connection-div,
.fc #test-connection-show-div {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 280px;
}

.fc #note {
  margin-left: 2rem !important;
}

.fc #test-connection-div {
  margin-left: 2rem !important;
}

.fc #test-connection-show-div {
  margin-left: 2.5rem !important;
}

/* 下拉選單每一行：label 靠左，select 靠右 */
.fc #test-connection-div .d-flex {
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
}

/* 設備數每一行：label 靠左，數字靠右 */
.fc #test-connection-show-div .note-div-flex-column {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
}

/* RWD：中型螢幕 (平板) */
@media (max-width: 992px) {
  .fc #test-connection-div {
    margin-left: 1rem !important;
    margin-right: 1.5rem;
  }

  .fc #test-connection-div,
  .fc #test-connection-show-div {
    min-width: 180px;
    max-width: 240px;
  }
}

/* RWD：極小螢幕 (手機直向) */
@media (max-width: 480px) {
  .fc #test-connection-div,
  .fc #test-connection-show-div {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .fc #test-connection-div .d-flex,
  .fc #test-connection-show-div .note-div-flex-column {
    gap: 0.5rem;
  }
}

/* 量測結果卡片中所有表格統一使用固定佈局和欄位寬度 */
.fc .test-result-card[data-id="delay"] table,
.fc .test-result-card[data-id="6mbps"] table,
.fc .test-result-card[data-id="10mbps"] table,
.fc .test-result-card[data-id="unlimited"] table {
  table-layout: fixed;
}

/* 群組測試失敗行樣式 - 需要覆蓋 Bootstrap table-hover、bg-white 和 --bs-table-bg */
.fc .test-result-card table.table-hover tbody tr.failed-row,
.fc .test-result-card table.table-hover tbody tr.failed-row:hover,
.fc .test-result-card table.bg-white tbody tr.failed-row,
.fc .test-result-card tbody tr.failed-row {
  background-color: #FFF3F3 !important;
  --bs-table-bg: #FFF3F3 !important;
}

/* 失敗行的所有 td 也需要背景色 */
.fc .test-result-card tbody tr.failed-row td {
  background-color: #FFF3F3 !important;
}

.fc .test-result-card tbody td.failed-item {
  color: #DC3434 !important;
  font-weight: 500 !important;
}

/* 群組測試未完成行樣式 */
.fc .test-result-card table.table-hover tbody tr.incomplete-row,
.fc .test-result-card table.table-hover tbody tr.incomplete-row:hover,
.fc .test-result-card table.bg-white tbody tr.incomplete-row,
.fc .test-result-card tbody tr.incomplete-row {
  background-color: #F9F9F9 !important;
  --bs-table-bg: #F9F9F9 !important;
}

/* 未完成行的所有 td 也需要背景色 */
.fc .test-result-card tbody tr.incomplete-row td {
  background-color: #F9F9F9 !important;
}