html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
}

.btn-primary{
  background-color: #20c1e7;
  border-color: #20c1e7;
}

.btn-primary:hover {
  color: #fff;
  background-color:  #20c1e7;
  border-color:  #20c1e7;
}

/*Sweet alert custom style*/


.swal2-confirm {
  background-color: #20c1e7 !important;
}

.swal2-confirm:focus {
  box-shadow: none !important;
}

/**/


/*Datatable custom style*/

#userListTable tbody,
#userListTable td {text-align: center;}

#userListTable thead,
#userListTable th {text-align: center;}

/*Datatable custom style*/

.user-list-action-button {
  border: none;
  background-color: transparent;
}

/* Sidebar menu colors (light default) */
.sidebar .nav .nav-item .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link .menu-icon {
  color: #000;
}

/* ============================= */
/*  Admin portal dark mode theme */
/* ============================= */
html.theme-dark body,
html.theme-dark .container-scroller,
html.theme-dark .page-body-wrapper {
  background-color: #1b1e21 !important;
  color: #e4e6eb;
}

html.theme-dark .main-panel,
html.theme-dark .content-wrapper {
  background: #1b1e21 !important;
  color: #e4e6eb;
}

html.theme-dark .navbar,
html.theme-dark .navbar .navbar-brand-wrapper,
html.theme-dark .navbar .navbar-menu-wrapper {
  background: #23272b !important;
}

html.theme-dark .navbar .navbar-brand,
html.theme-dark .navbar .nav-link,
html.theme-dark .navbar .mdi {
  color: #e4e6eb !important;
}

html.theme-dark .sidebar {
  background: #23272b !important;
}

html.theme-dark .sidebar .nav .nav-item .nav-link .menu-title,
html.theme-dark .sidebar .nav .nav-item .nav-link .menu-icon {
  color: #e4e6eb;
}

html.theme-dark .sidebar .nav .nav-item .nav-link:hover {
  background: #2c3136;
}

html.theme-dark .card {
  background-color: #23272b;
  color: #e4e6eb;
}

html.theme-dark .card-title,
html.theme-dark label,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3,
html.theme-dark h4,
html.theme-dark h5 {
  color: #e4e6eb;
}

html.theme-dark .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e4e6eb;
  --bs-table-striped-color: #e4e6eb;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.06);
  --bs-table-active-color: #ffffff;
  --bs-table-active-bg: rgba(255, 255, 255, 0.1);
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
  color: #e4e6eb;
}

html.theme-dark .table > :not(caption) > * > * {
  color: #e4e6eb;
}

html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.06);
  color: #e4e6eb;
}

html.theme-dark .table > :not(caption) > * > * {
  border-bottom-color: #3a3f44;
}

html.theme-dark .dropdown-menu {
  background-color: #23272b;
  border-color: #3a3f44;
}

html.theme-dark .dropdown-item,
html.theme-dark .dropdown-item-text {
  color: #e4e6eb;
}

html.theme-dark .dropdown-item:hover,
html.theme-dark .dropdown-item:focus {
  background-color: #2c3136;
  color: #fff;
}

html.theme-dark .dropdown-divider {
  border-top-color: #3a3f44;
}

html.theme-dark .modal-content {
  background-color: #23272b;
  color: #e4e6eb;
}

html.theme-dark .form-control {
  background-color: #2c3136;
  border-color: #3a3f44;
  color: #e4e6eb;
}

html.theme-dark .form-control:focus {
  background-color: #2c3136;
  color: #e4e6eb;
}

/* DataTables controls (length, search, info) */
html.theme-dark .dataTables_wrapper,
html.theme-dark .dataTables_wrapper .dataTables_length,
html.theme-dark .dataTables_wrapper .dataTables_filter,
html.theme-dark .dataTables_wrapper .dataTables_info,
html.theme-dark .dataTables_wrapper .dataTables_processing,
html.theme-dark .dataTables_wrapper .dataTables_paginate {
  color: #e4e6eb;
}

html.theme-dark .dataTables_wrapper .dataTables_length select,
html.theme-dark .dataTables_wrapper .dataTables_filter input {
  background-color: #2c3136;
  border: 1px solid #3a3f44;
  color: #e4e6eb;
}

/* DataTables / Bootstrap pagination */
html.theme-dark .page-link {
  background-color: #23272b;
  border-color: #3a3f44;
  color: #e4e6eb;
}

html.theme-dark .page-link:hover {
  background-color: #2c3136;
  border-color: #3a3f44;
  color: #fff;
}

html.theme-dark .page-item.active .page-link {
  background-color: #20c1e7;
  border-color: #20c1e7;
  color: #fff;
}

html.theme-dark .page-item.disabled .page-link {
  background-color: #23272b;
  border-color: #3a3f44;
  color: #6c757d;
}

html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #e4e6eb !important;
}

html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #20c1e7 !important;
  border-color: #20c1e7 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Initialized DataTable rows/cells: DataTables' default CSS forces a  */
/* white row background and dark text once the table is initialized,   */
/* so override it explicitly with high specificity for dark mode.      */
/* ------------------------------------------------------------------ */
html.theme-dark table.dataTable,
html.theme-dark table.dataTable thead th,
html.theme-dark table.dataTable thead td,
html.theme-dark table.dataTable tbody th,
html.theme-dark table.dataTable tbody td,
html.theme-dark table.dataTable > tbody > tr > th,
html.theme-dark table.dataTable > tbody > tr > td {
  color: #e4e6eb !important;
}

html.theme-dark table.dataTable tbody tr,
html.theme-dark table.dataTable tbody tr.odd,
html.theme-dark table.dataTable tbody tr.even {
  background-color: transparent !important;
}

html.theme-dark table.dataTable.stripe tbody tr.odd > *,
html.theme-dark table.dataTable.display tbody tr.odd > *,
html.theme-dark #userListTable.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #e4e6eb !important;
}

html.theme-dark table.dataTable tbody tr:hover > *,
html.theme-dark table.dataTable.hover tbody tr:hover > * {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* Sorted column highlight in dark mode */
html.theme-dark table.dataTable tbody tr > .sorting_1,
html.theme-dark table.dataTable tbody tr.odd > .sorting_1,
html.theme-dark table.dataTable tbody tr.even > .sorting_1 {
  background-color: rgba(255, 255, 255, 0.09) !important;
  color: #e4e6eb !important;
}

/* Header text/border in dark mode */
html.theme-dark table.dataTable thead th,
html.theme-dark table.dataTable thead td,
html.theme-dark #userListTable thead th {
  color: #ffffff !important;
  border-bottom-color: #3a3f44 !important;
}

/* Sort arrows should stay visible */
html.theme-dark table.dataTable thead .sorting:before,
html.theme-dark table.dataTable thead .sorting:after,
html.theme-dark table.dataTable thead .sorting_asc:before,
html.theme-dark table.dataTable thead .sorting_asc:after,
html.theme-dark table.dataTable thead .sorting_desc:before,
html.theme-dark table.dataTable thead .sorting_desc:after {
  color: #e4e6eb !important;
}