: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:50%;
}

[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:900px !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:90vw;
   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;
}

.filter-div {
  text-align:center;
}

#data-table > thead > tr:nth-child(2) > th:nth-child(1) > input[type=text] {
  display:none;
}


@media screen and (min-width: 768px) {
  .dt-layout-start {
    order:1;
  }
  
  .dt-layout-end {
   order:3 
  }
  
  .filter-div {
   order:2
  }
}