:root {
  --highlight-color:#2596f8; 
  --modify-row-color:#bf77f6;
  --checkbox-display: inline-block;
  --dynamic-height:calc(100% - var(--navbar-height));
}

#data-table .fa-tag {
  position:absolute;
  top:0;
  right:0
}

#data-table thead th {
  position:relative;
}

#data-table .filter-own-data {
 height:15px;
 margin:0;
}

[id^=table-row-checkbox] {
  display:var(--checkbox-display);
  margin:0 
}

#data-table tbody tr:hover {
  --modify-row-color: #35063e;
  background: var(--highlight-color);
  color: white;
}

.modify-row {
  color: var(--modify-row-color);
  font-weight:bold;
}

@media screen and (max-width:900px) {
  #showTable-part {
    /*overflow:auto;*/position:relative;height:var(--dynamic-height);width:1000px;
  }
  #data-table {
    width:1000px !important;
    table-layout:fixed;
    position:relative;     
  }
  
  #data-table table, 
  #data-table th, 
  #data-table tr, 
  #data-table td {
  word-break:break-all;
  } 
  
  .filter-div {
   position:relative; 
   font-weight:normal;
   font-size:14px;
  } 
  
  #bottom {
  position:sticky;left:0;width:100vw;
  }
}

@media screen and (min-width:901px) {
  #showTable-part {
  /*overflow:auto;*/position:relative;height:var(--dynamic-height); 
  }
  #showTable {
   width:95vw;
   max-width:1500px;
   margin:auto;
   
  }  
  
  #data-table {
    width:100% !important;
    table-layout:fixed;
    position:relative;     
  }
  
  #data-table table, 
  #data-table th, 
  #data-table tr, 
  #data-table td {
  word-break:break-all;
  }  
  
  .filter-div {
   position:relative;
   font-weight:normal;
   font-size:16px;
  }
}

@media only screen and (min-width: 901px) and (max-height: 650px) {
  #showTable-part {
    transform:translateX(200px);
    width:calc(100vw - 200px);  
    height:100%;
  }
  
  #data-table {
    width:100%;  
    font-size:10px;
  }
  
  #button-div {
    width:100%;
  }
  
  .table-left {
    transform:translateX(30px) !important;
    width:calc(100vw - 30px) !important;  
    transition: all 0.7s ease;	
  }  
  
  .table-right {
    transform:translateX(200px) !important;
    width:calc(100vw - 200px) !important;  
    transition: all 0.7s ease;	
  }  
}

#arrow-scroll {
 position:fixed;
 right:30px;
 bottom:30px;
 background:black;
 border-radius:50%;
 display:none;
}

#arrow-scroll > i {
  color:white;
}

thead input, tfoot input {
  padding:0;
  display: table-header-group;
}

#pageInfo {
  text-align:center;
}

#data-table > thead > tr:nth-child(2) > th:nth-child(1) > .column-search {
  display:none;
}


#data-table > thead > tr:nth-child(2) > th:nth-child(1) > select {
  display:none;
}

@media screen and (min-width: 768px) {
  #pageInfo {
   order:3
  }
  
  div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    margin-right: 0;
  }
  
  div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end { 
    margin-left: 0;
  }
}

html.dark #data-table input {
  color-scheme: dark;
}

#pageInfo input {
 width:50px;
 text-align: center;
 color-scheme: dark;
}


#data-table > thead > tr:nth-child(2) th {
  font-weight:normal  !important;
  font-style:normal !important;
}

#showTable .select2-container--default .select2-selection--single {
    background-color: #212529; /* 深色背景 */
    color: #fff; /* 白色文字 */
}

#showTable  .select2-dropdown {
    background-color: #212529; /* 下拉選單背景 */
    color: #fff; /* 下拉選單文字 */
}

#showTable  .select2-results__option {
    background-color: #333; /* 選項背景 */
    color: #fff; /* 選項文字 */
}

#showTable  .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff;
  margin:0;
  padding:0;
}

#showTable  .select2-selection__clear {
   color: #fff;
   /*margin:0;*/
   padding:0;
 }

#showTable  .select2-results__option[aria-disabled=true] { 
    display: none;
}

#showTable  .select2-container--default .select2-selection--single .select2-selection__rendered {
    /*background-color: orange; *//* e.g., #f0f0f0 or lightgray */
}

/*.select2-container--default .select2-results__option--highlighted[aria-selected],*/
#showTable  .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: brown !important; 
  color: #fff !important; 
} 

#showTable  .select2-container--default .select2-results__option--selected{
  background-color: brown !important;  /* Light blue example */
}

#showTable::empty, #bottom::empty {
  display:none
}

#data-table > thead > tr:nth-child(1)  th {
  border-top:1px solid rgb(64,67,70);
}
#data-table > tbody > tr:last-child td {
  border-bottom:1px solid rgb(64,67,70);
}
th {

  border-bottom: 1px solid rgb(64,67,70);

  border-right: 1px solid rgb(64,67,70);
}
 
th:first-child {
  border-left: 1px solid rgb(64,67,70)
}

html.dark .dt-container.dt-empty-footer table.dataTable {
    border-bottom: none;
}


@media screen and (max-width:900px) {
  #data-table_wrapper {
   width:1000px; 
  }
  
  .dt-layout-row:not(.dt-layout-table) {
    position:sticky;
    left:0;
    width:100vw !important;
  }
  thead {
    position:sticky;
    top:var(--navbar-height);
    z-index:1;
    background:rgb(33, 37, 41)
  }  
}

@media screen and (min-width:901px) {
  header {
    height:var(--navbar-height)
  }
  
  #data-table_wrapper {
   width:95vw;
   max-width:1500px;
   margin:auto;   
  }
  
  .dt-layout-row:not(.dt-layout-table) {
    position:sticky;
    left:0;
    width:100%
  }
  
  #showTable-part {
    width:100vw;
  }  
  
  thead {
  position:sticky;
  top:var(--navbar-height);
  z-index:1;
  background:rgb(33, 37, 41)
}
}  

@media only screen and (min-width: 901px) and (max-height: 650px) {
  header {
    height:auto
  }
  
  thead {
  position:sticky;
  top:0;
  z-index:1;
  background:rgb(33, 37, 41)
}  
  #showTable-part {
   width: calc(100vw - 200px);
  }
  
  #showTable {
   width:auto 
  }
  
  #bottom {
   width:auto; 
  }
  
   #showTable-header, #data-table_wrapper {
   width:100% !important;  
  } 
  
  .dt-layout-row:not(.dt-layout-table) {
    position:sticky;
    left:0;
    width:100%
  }  
}