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

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

/* #region DataTables */

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

.dtTable th,
.dtTable td,
.dtTable .btn {
  font-size: 1.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 10px !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;
}

.dtTable-btn {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.dtTable .icon-block {
  flex: 0 0 36px;
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius-pill);
  color: var(--fit-white);
}