/* ==========================================================
   COMPONENTA x-datatable
   ========================================================== */

.datatable-container {
  width: 70%;
  margin: 0 auto;
}

/* Card */

.card-header {
  background: #f8f9fa;
  font-weight: 600;
}

/* ==========================================================
   DataTables
   ========================================================== */

.dataTables_wrapper {
  font-size: 0.9rem;
}

/* Bara de sus */

.dataTables_length,
.dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_length label,
.dataTables_filter label {
  font-weight: 500;
}

/* Select */

.dataTables_length select {
  width: 80px;
  min-width: 80px;
  height: 36px;
  border-radius: 0.375rem;
}

/* Căutare */

.dataTables_filter input {
  width: 230px;
  height: 36px;
  border-radius: 0.375rem;
  margin-left: 0.5rem;
}

/* Info */

.dataTables_info {
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* Paginare */

.dataTables_paginate {
  margin-top: 1rem;
}

.dataTables_wrapper .paginate_button {
  padding: 0.35rem 0.8rem !important;
  border-radius: 0.35rem;
}

/* Buton pagina curentă */

.dataTables_wrapper .paginate_button.current {
  background: #0d6efd !important;
  color: #fff !important;
  border: 1px solid #0d6efd !important;
}

.dataTables_wrapper .paginate_button:hover {
  background: #0b5ed7 !important;
  color: #fff !important;
}

/* ==========================================================
   Buttons
   ========================================================== */

.dt-buttons {
  margin-bottom: 1rem;
}

.dt-button {
  border-radius: 0.375rem !important;
  margin-right: 0.35rem !important;
  padding: 0.35rem 0.8rem !important;
}

/* ==========================================================
   Tabel
   ========================================================== */

table.dataTable {
  width: 100% !important;
  border-collapse: collapse !important;
}

table.dataTable thead th {
  background: #cfe2ff;

  color: #000;

  text-align: center;

  vertical-align: middle;

  white-space: normal;

  font-weight: 600;
}

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

table.dataTable tfoot th {
  vertical-align: middle;

  background: #f8f9fa;

  font-weight: 700;
}

/* Hover */

table.dataTable tbody tr:hover {
  background: #f8fbff;
}

/* ==========================================================
   Coloane
   ========================================================== */

.datatable-auto th:nth-child(3),
.datatable-auto td:nth-child(3) {
  min-width: 420px;
}

.datatable-auto th:not(:nth-child(3)),
.datatable-auto td:not(:nth-child(3)) {
  white-space: nowrap;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 992px) {
  .datatable-container {
    width: 100%;
  }

  .dataTables_filter input {
    width: 170px;
  }
}

.datatable-auto {
  width: 100% !important;
}

.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .dataTables_scroll {
  width: 100%;
}

.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
  width: 100% !important;
}

.dataTables_wrapper .dataTables_scrollHead table,
.dataTables_wrapper .dataTables_scrollBody table {
  margin: 0 !important;
}

.dataTables_wrapper .dataTables_length {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length select {
  width: auto;
  display: inline-block;
}