/*
 *  * 表格 css
 */
/*--------------------------------*/

table {
  border-collapse: collapse;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  text-align: justify;
  font-size: 1rem;
}

/* #region DataTables */

.dtTable {
  /* width: 100% !important; */
}

  .dtTable th,
  .dtTable td {
      font-size: 1rem;
  }

  /* 不知道為何有 特殊class時，line-height會怪怪的，所以在調整一次line-height */
  .dtTable td {
      line-height: 1.1 !important;
      text-align: left;
  }

  .dtTable > tbody > tr {
      background: #fff;
  }

      .dtTable > tbody > tr:nth-child(odd):not(.child),
      .dtTable > tbody > tr:nth-child(odd):not(.child) > td {
          background: #f1efef;
      }

  .dtTable tbody tr:hover,
  .dtTable tbody tr:nth-child(odd):not(.child):hover td,
  .dtTable tbody tr:nth-child(even):not(.child):hover td {
      background: #00000020;
  }

  .dtTable > thead > tr > th {
      vertical-align: bottom;
      border-bottom: 0px solid #f2f9fd;
      color: #3a4d51;
      text-align: left;
      padding: 0.5rem 0.5rem !important;
      font-weight: 900;
      font-size: 1rem;
  }

  .dtTable thead tr th:first-child {
      text-align: center !important;
  }

  .dtTable > tbody > tr > td {
      padding: 0.5rem 0.5rem !important;
      vertical-align: top;
      text-align: left;
      border-bottom: 1px solid #f2f9fd;
      font-weight: 900;
  }

  .dtTable tbody tr td.text-center {
      text-align: center;
  }

  .dtTable tbody td.alignLeft {
      text-align: left;
  }

  .dtTable tbody td.alignRight {
      text-align: right;
  }

  .dtTable tbody tr td:first-child {
      text-align: center !important;
  }

  .dtTable tbody tr:last-child td {
      border-bottom: 0;
  }

  .dtTable tbody td.alignLeft {
      text-align: left;
  }

  .dtTable tbody td.alignRight {
      text-align: right;
  }

  .dtTable tbody td.width6nowrap {
      width: 6%;
  }

  .dtTable tbody td.width7nowrap {
      width: 7%;
  }

  .dtTable tbody td.width8nowrap {
      width: 8%;
  }

  .dtTable tbody td.width9nowrap {
      width: 9%;
  }

  .dtTable tbody td.width6 {
      width: 6%;
      white-space: nowrap;
  }

  .dtTable tbody td.width7 {
      width: 7%;
      white-space: nowrap;
  }

  .dtTable tbody td.width8 {
      width: 8%;
      white-space: nowrap;
  }

  .dtTable tbody td.width9 {
      width: 9%;
      white-space: nowrap;
  }

  .dtTable tbody td.width10 {
      width: 10%;
      white-space: nowrap;
  }

  .dtTable tbody td.width12 {
      width: 12%;
      white-space: nowrap;
  }

  .dtTable tbody td.width15 {
      width: 15%;
      white-space: nowrap;
  }

  .dtTable tbody td.width20 {
      width: 20%;
  }

  .dtTable tbody td.width30 {
      width: 30%;
  }

  .dtTable tbody td.width40 {
      width: 40%;
  }

  .dtTable tbody td.width50 {
      width: 50%;
  }

@media (min-width: 1024px) {
  .dtTable tbody td.width20 {
      width: 20%;
  }

  .dtTable tbody td.width30 {
      width: 30%;
  }

  .dtTable tbody td.width40 {
      width: 40%;
  }

  .dtTable tbody td.width50 {
      width: 50%;
  }
}

/*DataTables展開表格*/
.dtTable tbody tr.child td.child {
  text-align: left;
  background: rgba(241, 239, 239, 0.2);
}

.dtTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}

  .dtTable > tbody > tr.child ul.dtr-details > li {
      padding: 5px 10px 5px 20px !important;
      display: flex !important;
  }

      .dtTable > tbody > tr.child ul.dtr-details > li:not(:last-child) {
          border-bottom: 1px solid #00000020;
      }

      .dtTable > tbody > tr.child ul.dtr-details > li:hover {
          background: #00000020 !important;
      }

.dtTable > tbody > tr.child span.dtr-title {
  width: 30%;
  max-width: 120px;
  text-align: left;
  padding: 0 0.5rem;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  font-family: bootstrap-icons !important;
  margin-right: 0.5em;
  display: inline-block;
  color: rgba(0, 0, 0, 0.5);
  content: "\F4FA" !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
  font-family: bootstrap-icons !important;
  content: "\F2E6" !important;
  border-top: 5px solid transparent !important;
}

/*DataTables-綠色板-th深綠td白色和淺綠色間隔*/
.dtTable.Green > thead > tr > th {
  color: #ffffff;
}

.dtTable.Green > thead > tr,
.dtTable.Green > thead > tr > th {
  background: #4d9973;
}

.dtTable.Green > tbody > tr:nth-child(odd):not(.child),
.dtTable.Green > tbody > tr:nth-child(odd):not(.child) > td {
  background: #4d997320;
}

.dtTable.Green tbody tr:not(.child):hover,
.dtTable.Green tbody tr:nth-child(even):not(.child):hover td,
.dtTable.Green tbody tr:nth-child(odd):not(.child):hover td {
  background: #00000015;
}

.dtTable.Green > tbody > tr > td {
  vertical-align: middle;
  color: #383b4f;
}

/* DataTables-綠色板 展開表格 */
.dtTable.Green tbody tr.child td.child {
  background: #00000010;
}

/*DataTables-冷灰色板*/
.dtTable.coolGrey > thead > tr > th {
  color: #ffffff;
}

.dtTable.coolGrey > thead > tr,
.dtTable.coolGrey > thead > tr > th {
  background: #2e3039;
}

.dtTable.coolGrey > tbody > tr:nth-child(odd):not(.child),
.dtTable.coolGrey > tbody > tr:nth-child(odd):not(.child) > td {
  background: #f3f4f6;
}

.dtTable.coolGrey tbody tr:not(.child):hover,
.dtTable.coolGrey tbody tr:nth-child(even):not(.child):hover td,
.dtTable.coolGrey tbody tr:nth-child(odd):not(.child):hover td {
  background: #e4e5e6;
}

.dtTable.coolGrey > tbody > tr > td {
  vertical-align: middle;
  color: #383b4f;
}

/* DataTables-冷灰色板 展開表格 */
.dtTable.coolGrey tbody tr.child td.child {
  background: #00000010;
}

/* #endregion */

.w1rem {
  min-width: 1rem !important;
  width: 1rem !important;
}

.w2rem {
  min-width: 2rem !important;
  width: 2rem !important;
}

.w3rem {
  min-width: 3rem !important;
  width: 3rem !important;
}

.w4rem {
  min-width: 4rem !important;
  width: 4rem !important;
}

.w5rem {
  min-width: 5rem !important;
  width: 5rem !important;
}

.w6rem {
  min-width: 6rem !important;
  width: 6rem !important;
}

.w7rem {
  min-width: 7rem !important;
  width: 7rem !important;
}

.w8rem {
  min-width: 8rem !important;
  width: 8rem !important;
}

.w9rem {
  min-width: 9rem !important;
  width: 9rem !important;
}

.w10rem {
  min-width: 10rem !important;
  width: 10rem !important;
}

.w11rem {
  min-width: 11rem !important;
  width: 11rem !important;
}

.w12rem {
  min-width: 12rem !important;
  width: 12rem !important;
}

.w13rem {
  min-width: 13rem !important;
  width: 13rem !important;
}

.w14rem {
  min-width: 14rem !important;
  width: 14rem !important;
}

.w15rem {
  min-width: 15rem !important;
  width: 15rem !important;
}

.w16rem {
  min-width: 16rem !important;
  width: 16rem !important;
}

.w17rem {
  min-width: 17rem !important;
  width: 17rem !important;
}

.w18rem {
  min-width: 18rem !important;
  width: 18rem !important;
}

.w19rem {
  min-width: 19rem !important;
  width: 19rem !important;
}

.w20rem {
  min-width: 20rem !important;
  width: 20rem !important;
}


@media (max-width: 1200px) {
}
/* bootstrap 改寫設定 */
  .dtTable td .btn {
      margin-bottom: 2px;
  }
/*dtTable-sm 比較小的行高設定*/
.dtTable.dtTable-sm > thead > tr > th {
  text-align: left;
  padding: 0.25rem 0.2rem !important;
  font-weight: 900;
  line-height: 1;
  font-size: 1rem;
}