@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&display=swap");

body,
.table,
.table th,
.table td {
  font-family: din-next-w01-light, din-next-w02-light, din-next-w10-light,
    sans-serif;
  font-size: 15px;
  font-weight: 500;
}

table.table-bordered.dataTable th {
  background-color: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 500;
}

table.dataTable.table-striped>tbody>tr.odd>* {
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
}

table.dataTable.table-striped>tbody>tr:nth-of-type(2n + 1) {
  background-color: rgb(249, 249, 249);
}

.dataTables_wrapper .page-item.active .page-link {
  background-color: #28a745;
  border-color: #28a745;
}

.dataTables_wrapper .page-link,
table.table-bordered.dataTable tbody td a {
  color: #28a745;
  font-weight: 600;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
  color: #ddd;
  opacity: 0.9;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
  color: #ddd;
  opacity: 0.6;
}

.form-control-sm {
  border-radius: 0;
  border: 1px solid #000;
}

.form-control:focus {
  box-shadow: none;
  border: 1px solid #000;
}

table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border: none;
  border-bottom: 1px solid #dee2e6;
}

table tbody td {
  /* word-break: break-all; */
}

table.table-bordered.dataTable th {
  border: none;
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle;
}

.no-wrap {
  white-space: nowrap;
}

table.table-bordered.dataTable {
  border: 1px solid #000;
  margin-top: 0 !important;
  width: 100% !important;
}

.dataTables_wrapper {

  padding-top: 0;
  padding-bottom: 20px;
  margin-bottom: 50px;
}

.dataTables_filter,
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  padding-right: 20px;
}

.dataTables_length,
.dataTables_info {
  padding-left: 20px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
}

.filter-custom {
  background-color: #fff;
  padding: 20px 20px 0 0;
}

.filter-custom label,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  color: #000;
}

.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
  background-color: #fff;
}

.shown+tr td[colspan="6"] {
  background-color: #fff;
}

.dataTables_length {
  margin-right: -15px;
}

div.dataTables_wrapper div.dataTables_filter {
  margin-left: -15px;
}

.nav-tabs {
  border-bottom: 1px solid #fff;
  background-color: #fff;
  padding: 20px 0;
  border-top: 1px solid #fff;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
  margin-right: 5px;
  width: 100%;
  max-width: 150px;
  text-align: center;
}

.nav-tabs .nav-link {
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: #8cd17d;
  color: #fff;
  border-radius: 0.25rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.shown-td:before {
  content: "-" !important;
  background-color: #d33333 !important;
}

.tr-expand,
.shown-td {
  background-color: #fff !important;
}

.dataTables_filter {
  display: none;
}

.dataTables_wrapper .col-md-6 {
  background-color: #fff;
}

#table1_wrapper .row {
  padding-top: 10px;
}

.td-expand {
  width: 14%;
}

.reset-btn {
    margin-top: 30px;
    background-color: #d33333;
    color: #fff;
}
.reset-btn:hover {
	color: #fff;
}

.btn-group>.btn {
  flex: 0;
  background-color: #6c757d;
  border-color: #6c757d;
  margin: 0 0 0 5px !important;
  border-radius: 0 !important;
}

.dt-buttons {
  margin-left: auto;
  width: 100%;
  padding: 15px;
  justify-content: end;
  align-items: flex-end;
}

.btn-group>.btn:focus,
.dataTables_wrapper .btn-secondary:not(:disabled):not(.disabled):active,
.dataTables_wrapper .btn-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}

.dataTables_wrapper .btn-group>.btn:hover,
.dataTables_wrapper .btn-group>.btn:focus {
  background-color: #28a745;
  border-color: #28a745;
}

.dataTables_wrapper .btn-secondary:not(:disabled):not(.disabled):active {
  background-color: #5cb549;
  border-color: #5cb549;
}

table.table-bordered.dataTable tbody td a {
  word-break: break-all;
}



@media (max-width: 991px) {
  .dataTables_wrapper {
    border: none;
  }

  .nav-tabs .nav-item {
    margin-bottom: 5px;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    flex-wrap: wrap;
  }
}

@media (min-width: 1200px) {
  .dataTables_wrapper #table1_length {
    margin-top: -50px;
    margin-bottom: 30px;
    margin-right: 0;

  }
  .dataTable tbody>tr>td:nth-child(3),
  .dataTable tbody>tr>td:nth-child(4),
  .dataTable tbody>tr>td:nth-child(4) span {
    word-wrap: break-word;

  }

  .dataTable tbody>tr>td:nth-child(4) span {
    display: block;
  }

  .dataTable tbody>tr.tr-expand td {
    white-space: normal;
  }

  div.dataTables_wrapper div.dataTables_length select {
    position: relative;
    z-index: 1;
  }
}
