.category-list{
  display:flex;flex-wrap:wrap;margin-bottom:30px;
}
.category-list>.category:first-child{
  margin-left:0px;
}
.category-list>.category{
  margin:0px 5px;
  margin-bottom:10px;
  background:#dceaf6;
  border-radius:4px;
  padding:6px 10px;
  cursor:pointer;
}
.category-list>.category-current{
  background:var(--brand-color);
  color:white;
}


tr.course .course-list-image {
  width:130px;height:80px;object-fit:cover;
}
tr.course .online-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: var(--brand-color);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 5px;
  box-shadow: 0px 0px 5px white;
  opacity: 0.8;
}
tr.course .recruiting{
  color:var(--orange-color);
}
tr.course .warning{
  color:var(--red-color);
}
tr.course .pass{
  color:var(--green-color);
}
tr.course .closed{
  color:var(--noraml-grey)
}

.pagination{
  display:flex;
  list-style-type:none;
  margin:30px 0px;
  padding-inline-start:0px;
}
.pagination>li.paginate_button{
  margin:0px 10px;
}
.pagination>li.active>a,
.pagination>li.next>a,
.pagination>li.previous>a{
  color:var(--brand-light-color);
}
.pagination>li.disabled>a{
  color:var(--noraml-grey);
}

@media (max-width: 1000px){
  .table {
    min-width: 100%;
  }
  .table th {
    display: none;
  }
  .table.datatable>tbody>tr {
    border:1px solid var(--grey-c);
    margin:20px auto;
    border-radius:5px;
    background:white;
    display:block;
    padding-bottom:15px
  }
  .table.datatable>tbody>tr>td{
    border-top:0;
    padding:2px 15px;
    display: block;
    line-height: 1.5rem;
    border-bottom-width:0px;
  }
  .table.datatable>tbody>tr>td:nth-child(1){
    padding:0px;
  }
  .table.datatable>tbody>tr>td:nth-child(2){
    font-weight:bold;
  }
  .table.datatable>tbody>tr>td:nth-child(4){
    display:none;
  }
  tr.course .course-list-image {
    width:100%;height:auto;max-height:250px;
  }
  .online-badge{
    width: 60px;
    font-size: 12px;
  }
  .course-paids-display{
    display:none !important;
  }
}