table.dataTable input.dt-select-checkbox {
  border: solid 1px var(--grayscale-400) !important;
  border-radius: 5.5px !important;
  top: -2px;
}

.dark-mode table.dataTable input.dt-select-checkbox {
  border: solid 1px #ffffff !important;
}

table.dataTable tbody tr td {
  padding: 12px 0.5rem;
}

.dt-length .form-select.form-select-sm {
  line-height: 1;
  padding: 9px 15px 9px 9px;
  border-radius: 8px;
  font-size: 14px;
  background-position: right center;
  background-size: 24px 16px;
  width: 100%;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23171717%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.dark-mode .dt-length .form-select.form-select-sm {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

table.dataTable input.dt-select-checkbox:checked {
  border-color: var(--main) !important;
  background-color: var(--main) !important;
  color: white;
  box-shadow: 0 0 0 .25rem rgb(255 128 48 / 49%);
}

.dark-mode .table>thead>tr {
  background-color: unset;
}

.table>thead>tr {
  background-color: var(--grayscale-100);

  overflow: hidden !important;
}

.dt-scroll-head {
  border-radius: 10px !important;
}

#documents-table_wrapper .dt-scroll-head {
  background-color: var(--grayscale-100);
}

.table>thead>tr>th {
  background-color: #F9F9F9 !important;
  border-bottom: 0;
  color: var(--grayscale-400);
  font-weight: 500;
  height: 56px !important;
}

table.dataTable th,
table.dataTable td {
  height: 100% !important;
}

table.dataTable tr {
  border-top: 0;
}

table.table.dataTable {
  font-size: 14px;
  font-weight: 500;
}

table.dataTable th,
table.dataTable td {
  vertical-align: middle;
}

table.table.dataTable>tbody>tr.selected>*,
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1).selected>* {
  box-shadow: none;
  color: var(--grayscale-900);
}

table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
  box-shadow: none;
}

table.dataTable input.dt-select-checkbox {
  height: 16px;
  width: 16px;
}

table.dataTable input.dt-select-checkbox:checked {
  background: url('../images/v.svg');
}

table.dataTable input.dt-select-checkbox:checked:after {
  display: none;
}

div.dt-container div.dt-paging ul.pagination li {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
}

div.dt-container div.dt-paging ul.pagination {
  display: flex;
}

div.dt-container div.dt-paging ul.pagination li:first-child {
  margin-right: 20px;
}

div.dt-container div.dt-paging ul.pagination li:last-child {
  margin-left: 20px;
}

div.dt-container div.dt-paging ul.pagination li a {
  border-radius: 10px;
  font-size: 14px;
  color: var(--grayscale-900);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

div.dt-container div.dt-paging ul.pagination li:first-child a,
div.dt-container div.dt-paging ul.pagination li:last-child a {
  border-color: var(--grayscale-200);
}

div.dt-container div.dt-paging ul.pagination li.disabled a {
  background-color: unset;
}

div.dt-container div.dt-paging ul.pagination li a.previous,
div.dt-container div.dt-paging ul.pagination li a.next {
  text-indent: -9999px;
  text-overflow: clip;
  position: relative;
  overflow: hidden;
}

div.dt-container div.dt-paging ul.pagination li a.previous:after,
div.dt-container div.dt-paging ul.pagination li a.next:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22chevron-up%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7.52876%205.52851C7.78911%205.26816%208.21122%205.26816%208.47157%205.52851L12.4716%209.52851C12.7319%209.78886%2012.7319%2010.211%2012.4716%2010.4713C12.2112%2010.7317%2011.7891%2010.7317%2011.5288%2010.4713L8.00016%206.94273L4.47157%2010.4713C4.21122%2010.7317%203.78911%2010.7317%203.52876%2010.4713C3.26841%2010.211%203.26841%209.78886%203.52876%209.52851L7.52876%205.52851Z%22%20fill%3D%22%23171717%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg);
}

div.dt-container div.dt-paging ul.pagination li a.next:after {
  transform: rotate(90deg);
}

div.dt-container div.dt-paging ul.pagination li.active a {
  background-color: var(--grayscale-100);
  border-color: var(--grayscale-100);
  color: var(--grayscale-900);

}

table.dataTable input.dt-select-checkbox:indeterminate::after {
  display: none;
}

.dataTable .dt-mobile {
  display: none;
}

.dataTable [data-dt-column]:last-child {
  display: none;
}

div.dt-container div.dt-paging ul.pagination .page-item .page-link {
  font-weight: 600;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: left;
}

table#templates-table tbody td.template-category {
  text-align: center;
}

.dt-table-wrap .dt-container .bottom .right .dt-length select {
  font-size: 14px;
  font-weight: 500;
}

.dt-table-wrap .dt-container .bottom .right .dt-length select:hover {
  cursor: pointer;
}

.td-action .actions-wrap {
  width: 52px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 992px) {
  table#templates-table td.template-document {
    font-size: 11px;
  }

  table#templates-table td.template-document .tag-div .separator {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .dataTable tbody tr {
    border: 1px solid #F4F4F4 !important;
    display: inline-table;
    width: 100%;
    margin: 10px 0;
    border-radius: 10px;
  }

  .dark-mode .dataTable tbody tr {
    border-color: #e5e5e533 !important;
  }

  .dataTable td {
    border: none;
  }

  .template-contaier {
    padding: 1.5rem 0;
  }

  .upload-document {
    margin-bottom: 1rem;
  }

  .training {
    border-right: 0 !important;
  }

  table.dataTable>tbody>tr>.dt-select {
    vertical-align: top;
    width: 15%;
  }

  .dataTable .dt-mobile {
    display: block;
  }

  .dataTable .dt-mobile .td-action {
    gap: 0.5rem;
  }

  .dataTable .dt-mobile .td-label {
    font-weight: 700;
  }

  .dataTable .dt-mobile .td-action .td-action-item {
    gap: 1.75rem;
  }

  .dataTable thead {
    display: none;
  }

  .dataTable [data-dt-column]:not(:last-child) {
    display: none;
  }

  .dataTable tbody tr td:not(.dt-mobile):not(:first-child) {
    display: none;
  }

  div.dt-scroll-body {
    border-bottom-color: transparent !important;
  }

  .dt-table-wrap .dt-container .bottom .right {
    display: none;
  }
}