.cra-medical-expenses-table-wrapper {
  margin: 32px 0;
  padding: 32px;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  transition: box-shadow 0.5s;
  transition: 0.3s;

  &:hover {
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--color-brand-300);
    transform: translateY(-8px);
  }
}

.cra-medical-expenses-table-wrapper table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
  border-bottom: none;
}

.cra-medical-expenses-table-wrapper div.dt-container.dt-empty-footer tbody>tr:last-child>* {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cra-medical-expenses-table-wrapper div.dt-container div.dt-layout-row {
  margin: 1.5rem 0;
}

.cra-medical-expenses-table-wrapper  div.dt-container select.dt-input {
  padding: 10px;
  margin-right: 10px;
}

.cra-medical-expenses-table-wrapper  div.dt-container .dt-search input {
  padding: 10px;
  margin-left: 10px;
}

.cra-medical-expenses-table-wrapper .dt-paging {
  border: 1px solid var(--color-gray-300);
  border-radius: 8px;
  padding: 0 12px;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
}

.cra-medical-expenses-table-wrapper div.dt-container .dt-paging .dt-paging-button.current {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.cra-medical-expenses-table-wrapper div.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--color-brand-700);
  border: 1px solid transparent;
}

.cra-medical-expenses-table-wrapper table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td {
  padding: 16px 12px;
}

.cra-medical-expenses-table-wrapper div.dt-container .dt-paging .dt-paging-button:hover {
  color: var(--color-white) !important;
}