:root {

  --highlight-color:#2596f8; 

  --modify-row-color:#bf77f6;
  --checkbox-display: inline-block;
}

#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;
}


#bottom {
  position:sticky;left:0;width:100vw;
}

@media screen and (max-width:900px) {
  #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;
  }  
}

@media screen and (min-width:900px) {
  #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: 900px) and (max-height: 650px) {
  #showTable-header {
    transform:translateX(200px);
    width:calc(100vw - 200px);  
  }  
  
  #showTable {
   transform:translateX(200px);
   width:calc(100vw - 200px); 
   margin: 0;
  }
  
  #data-table {
    width:100%;  
    font-size:10px;
  }
  
  #bottom {
    width: calc(100vw - 200px);  
    transform:translateX(200px);
  }  
  
  #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 {
  width: 100%;
  height:30px;
  padding: 3px;
  box-sizing: border-box;
  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;
}

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

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

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

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

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

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

.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],*/
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: brown !important; 
  color: #fff !important; 
} 

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