.border-1px {
    border: 1px solid black !important;
}
.square-list-item {
    list-style-type: square !important;
}
.no-style-list-item {
    list-style-type: none !important;
}
.text-red {
    color: red !important;
}
.underline-text {
    -webkit-text-decoration: underline !important;
    text-decoration: underline !important;
}

.assessment_fee_payable {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
}
#assessment_fee_payable {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
}
section-title {
  text-align: justify !important;
  text-justify: inter-word !important;
  white-space: pre-line !important;
}

.step2-table {
  display: table !important; /* Use table display for the table container */
  width: 100%;
    max-width: 860px; /* Limit maximum width */
 
  margin: 0 auto; /* Center the table horizontally */
  box-sizing: border-box; /* Include border in width calculation */
    border-collapse: separate !important; /* Remove gaps by collapsing borders */
    border-spacing: 0 !important; /* Ensure no spacing between rows */
}

.row{
  display: table-row !important; /* Define each row */
 height: 40px !important;
  box-sizing: border-box; /* Include border in width calculation */
}



.Tcell {
  display: table-cell; /* Keep table-cell display */
  box-sizing: border-box;
  vertical-align: middle; /* Vertically center content */
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words to wrap */
  word-break: break-word; /* Ensure long words break to fit */
  border: 1px solid ;/* Visible blue border for cells */
}

.Tcell:nth-child(1) {
  width: 30%; 
}
.Tcell:nth-child(2) {
  width: 18%;
  border-right-style: double !important; /* Double border only on the right side of the table */
  border-right-width: 5px !important; /* Thicker border to simulate three lines */

}

.Tcell:nth-child(3) {
   width: 22%;
}
.Tcell:nth-child(4) {
   width: 15%;
}
.Tcell:nth-child(5) {
   width: 15%;
}


.table-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 860px; /* Adjust as needed */
   white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words to wrap */

  /*border: 1px solid ;/* Visible blue border for cells */
    }
    .Trow {
      display: flex;
      width: 100%;
    flex-wrap: wrap; 
    }
.Trow2 {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.Trow3 {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
    .cell {
      flex: 1; /* Equal width for columns */
      padding: 10px;
/*border: 1px solid ;*/
      box-sizing: border-box;
    }
.cell:nth-child(1) {
      flex: 3; 
    }
    .cell:nth-child(2) {
      flex: 1.8; 
    }
.cell:nth-child(3) {
      flex: 2.2; 
    }
    .cell:nth-child(4) {
      flex: 1.5; 
    }
    .cell:nth-child(5) {
      flex: 1.5; 
    }
/* Individual cell styles - you can customize each one */
.cell-1-1 { flex: 2.7; border: 1px solid black ; padding: 5px;}
.cell-1-2 { flex: 1.8;border: 1px solid black;  padding: 5px;}
.cell-1-3 { flex: 0.05; border: 1px solid black;  }
.cell-1-4 { flex: 2.2;border: 1px solid black;  padding: 5px;}
.cell-1-5 { flex: 1.5; border: 1px solid black; padding: 5px;}
.cell-1-6 { flex: 1.5; border: 1px solid transparent;padding: 5px; }

.cell-2-1 { flex: 2.7;border: 1px solid black;  padding: 5px;}
.cell-2-2 { flex: 1.8;border: 1px solid black;  padding: 5px;}
.cell-2-3 { flex: 0.05; border: 1px solid black;  }
.cell-2-4 { flex: 2.2; border: 1px solid black; padding: 5px;}
.cell-2-5 { flex: 1.5; border: 1px solid black; padding: 5px;}
.cell-2-6 { flex: 1.5;  border: 1px solid transparent;padding: 5px;}

.cell-3-1 { flex: 2.7;border: 1px solid black; padding: 5px;}
.cell-3-2 { flex: 1.8;border: 1px solid black; padding: 5px;}
.cell-3-3 { flex: 0.05; border: 1px solid black;  }
.cell-3-4 { flex: 2.2;border: 1px solid black; padding: 5px;}
.cell-3-5 { flex: 1.5;border: 1px solid black; padding: 5px;}
.cell-3-6 { flex: 1.5;border: 1px solid black; padding: 5px;}


@media (max-width: 768px) {
.step2-table {
max-width: 50% !important;
  width: 50%;
}

    .row {
        display: table-row !important;
        box-sizing: border-box !important;
        height: 20px !important; /* Added fixed height for each row */
    }
}
@media (max-width: 768px) {
  .table-container {
    width:100%;
    max-width: 105%;
    padding: 0 5px;
  }

  .Trow, .Trow2, .Trow3 {
    flex-wrap: wrap;
 font-size: 12px;
  }

  .cell {
    flex: 1 1 auto;
    min-width: 120px; /* 最小寬度，防止過窄 */
    font-size: 12px;
  }

  .sup {
    vertical-align: super;
    font-size: 75%;
    line-height: 0;
}
  /* 第一行：重要單元格保持較大寬度 */
  .cell-1-1 { flex: 2.7 1 30%; width: 30%; }
  .cell-1-2 { flex: 1.8 1 20%; width: 20%; }
  .cell-1-3 { flex: 0.05 1 1%; width: 10%; min-width: 1px;   } /* 確保最小寬度 */
  .cell-1-4 { flex: 2.2 1 25%; width: 25%; }
  .cell-1-5 { flex: 1.5 1 15%; width: 20%; }
  .cell-1-6 { flex: 1.5 1 15%; width: 5%; }

  /* 第二行和第三行類似 */
  .cell-2-1 { flex: 2.7 1 30%; width: 30%; font-size: 11px;  }
  .cell-3-1 { flex: 2.7 1 30%; width: 30%;  }
  .cell-2-2, .cell-3-2 { flex: 1.8 1 20%; width: 20%; }
  .cell-2-3, .cell-3-3 { flex: 0.05 1 1%; width: 10%; min-width: 1px; }
  .cell-2-4{ flex: 2.2 1 25%; width: 25%;font-size: 11px; }
  .cell-3-4 { flex: 2.2 1 25%; width: 25%; }
  .cell-2-5, .cell-3-5 { flex: 1.5 1 15%; width: 15%; }
  .cell-2-6, .cell-3-6 { flex: 1.5 1 15%; width: 15%; }
}