.datagrid-wrap{font-family:Arial;font-size:13px}

.datagrid-wrapper {
    overflow-x: auto;
    padding-bottom: 12px;   /* JARAK SCROLL DENGAN PAGINATION */
}

.datagrid-toolbar{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.datagrid-toolbar input{
  padding:5px;
  border:1px solid #bbb;
  border-radius:4px;
  width:200px;
}

.datagrid-toolbar select{
  padding:4px;
}

.datagrid-tbl{
  border-collapse:collapse;
  width:100%;
}

.datagrid-tbl th{
  background:#2c3e50;
  color:#fff;
  padding:7px;
  cursor:pointer;
  white-space:nowrap;
}

.datagrid-tbl td{
  padding:6px 7px;
  border:1px solid #ddd;
  white-space:nowrap;
}

.datagrid-tbl tr:nth-child(even){
  background:#fafafa;
}

.datagrid-tbl tr:hover{
  background:#eef6ff;
}

.dg-paging{
  text-align:center;
  margin-top:8px;
}

.dg-paging button{
  padding:5px 9px;
  margin:2px;
  border:1px solid #bbb;
  background:#fff;
  cursor:pointer;
}

.dg-paging button.active{
  background:#2c3e50;
  color:#fff;
  border-color:#2c3e50;
}