/** @format */

:root {
  --body-bg-color: #fff !important;
  --swal-bg-color: #fff !important;
  --text-color: #333 !important;
  --progress-bar-color: #ccc !important;

  --switch-on-color: #242a33;
  --switch-off-color: #ccc;
  --toggler-color: #fff;
}

.dark {
  --body-bg-color: #242a33 !important;
  --swal-bg-color: #242a33 !important;
  --text-color: #efefef !important;
  --progress-bar-color: #fff !important;

  --switch-on-color: #fff;
  --switch-off-color: #ccc;
  --toggler-color: #242a33;
}

.dark .table {
  color: var(--text-color) !important;
}

.dark .table:not(.table-sm) thead th {
  color: var(--text-color) !important;
}

.my-swal-title {
  text-align: initial !important;
  color: var(--text-color) !important;
}

.my-swal-popup {
  background-color: var(--swal-bg-color) !important;
  font-size: 0.75rem !important;
}

.my-swal-progress-bar {
  background: var(--progress-bar-color);
}

.dark .swal2-popup {
  background-color: var(--swal-bg-color) !important;
  color: var(--text-color) !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child {
  padding-top: 5px;
}

.dropdown-item:focus, .dropdown-item:active {
    background-color: transparent !important;
}

.color-circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #ddd;
}