:root { color-scheme: light dark; }
html[data-color-scheme="light"] { color-scheme: light; }
html[data-color-scheme="dark"] { color-scheme: dark; }

/* Prevent layout flash due to feather icons on pageload */
i[data-feather] { display: inline-block; width: 18px; height: 18px; }

/* Datatable */
div.dataTables_wrapper div.dataTables_filter { display: flex; justify-content: flex-end; align-content: stretch; }
div.dataTables_wrapper div.dataTables_filter select { max-width: 160px; margin-left: .5em; display: inline-block; width: auto; }
table[data-widget="datatable"] th.table-action, table[data-widget="datatable"] td.table-action { width: 1%; white-space: nowrap; }
table[data-widget="datatable"] thead tr:nth-child(2) th { padding-right: 0.75rem; }
table .table-action a { display: inline-flex; width: 1.5rem; height: 1.5rem; justify-content: center; align-items: center; margin: 0 2px; text-decoration: none; color: white; background-color: var(--bs-secondary); border-radius: 2px; }
table .table-action a:hover { color: white; background-color: #3e444a; }
html[data-color-scheme="dark"] table .table-action a:hover { background-color: #6c6f79; }
.columns-toggle button i { font-size: 1.2em;  }
.columns-toggle button[data-column-visible] i::before { content: "\f205"; color: var(--bs-success); }
.columns-toggle button:not([data-column-visible]) i::before { content: "\f204"; color: var(--bs-gray-400); }

/* Clickable rows when table has default action(s) */
table.has-default-action tbody tr { cursor: pointer; }

/* Form */
label.required::after { content: ' *'; color: var(--bs-red); font-size: 0.85em; vertical-align: top; }
.checkbox-group label.form-label { cursor: pointer; }
.select2 .select2-selection.is-invalid{ border-color:#d9534f; }
.form-switch input.form-check-input { width: 26px; height: 16px; cursor: pointer; }
.dropdown-item .form-switch input.form-check-input { width: 21px; height: 13px; }

/* Form: add arrow to dropdowns */
select.form-control:not([multiple]) { padding-right: 1.75em; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgNTEyIj48cGF0aCBmaWxsPSIjY2VkNGRhIiBkPSJNMTE5LjUgMzI2LjlMMy41IDIwOS4xYy00LjctNC43LTQuNy0xMi4zIDAtMTdsNy4xLTcuMWM0LjctNC43IDEyLjMtNC43IDE3IDBMMTI4IDI4Ny4zbDEwMC40LTEwMi4yYzQuNy00LjcgMTIuMy00LjcgMTcgMGw3LjEgNy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wxMzYuNSAzMjdjLTQuNyA0LjYtMTIuMyA0LjYtMTctLjF6Ij48L3BhdGg+PC9zdmc+"); background-size: auto 1.666em; background-position: center right .5em; background-repeat: no-repeat; }
/* Form: help text */
.help-text { margin-bottom: .5rem; font-size: .7rem; line-height: 1.35; color: var(--bs-gray-500); }
.form-label + .help-text { margin-top: -.5rem; }
/* Form: plaintext "inputs" should look like plain text */
.form-control-plaintext { background-color: transparent !important; }
/* Form: action bar */
.action-bar-wrapper { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; padding: 1rem 0.75rem; margin-top: calc(var(--bs-gutter-y)*-1); background: var(--bs-white); border-top: 1px solid var(--bs-gray-300); border-radius: 0.25rem; box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%); position: sticky; bottom: 0px; z-index: 1000; }
@media (prefers-color-scheme: dark) {
	.action-bar-wrapper { box-shadow: 0 0 0.875rem 0 rgb(41 48 66 / 5%); }
}
/* Password visibvility toggle */
#toggle-password {border-color: var(--bs-gray-400) !important;}
#toggle-password i {transition: opacity ease 0.2s;}
#toggle-password:hover i {opacity: 0.5;}

/* Sidebar */
.sidebar-brand .logo { height: 50px; max-height: 50px; }

.separator hr{ width: 100%; }
.separator span{ padding:0 10px; }

body.modal-open > .select2-container--open { z-index: 9999; }
.modal-body > p.content { width: 100% }

/* Alerts: revert text color overwrite */
.alert { color: var(--bs-alert-color, #212529); }

/* Disabled icons: reduce opacity for disabled icons */
i[class*="fa-"].disabled, i[class*="fa-"][disabled], .disabled > i[class*="fa-"], [disabled] > i[class*="fa-"] { opacity: 0.5; }

/* Bootstrap multiselect */
.multiselect .dropdown-toggle::after { margin-left: 0.5em; }
.multiselect .dropdown-item { user-select: none; }
.multiselect-container .multiselect-group, .multiselect-container .multiselect-option.dropdown-item, .multiselect-container .multiselect-group.dropdown-item, .multiselect-container .multiselect-all.dropdown-item, .multiselect-container .multiselect-option.dropdown-toggle, .multiselect-container .multiselect-group.dropdown-toggle, .multiselect-container .multiselect-all.dropdown-toggle, .multiselect-container .multiselect-option .form-check-label, .multiselect-container .multiselect-group .form-check-label, .multiselect-container .multiselect-all .form-check-label { cursor: pointer; }
.multiselect-container .dropdown-item.active, .multiselect-container .dropdown-item:active { background-color: var(--bs-light); color: var(--bs-dropdown-link-color); }
span.multiselect-native-select select { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px -1px -1px -3px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; left: 50%; top: 30px; }

.tab .nav-tabs a.nav-link { max-height: 100%; }
.tab .nav-tabs a.nav-link.active { font-weight: 500 !important; }
.tab .nav-tabs a.nav-link .badge { margin-left: 10px; }

@media (prefers-color-scheme: light) {
	.tab .nav-tabs a:not(:hover).nav-link { color: #495057 !important; }
	.tab .nav-tabs a.nav-link:not(.active) { background-color: #e2e8ee5c !important; }
}

@media (prefers-color-scheme: dark) {
	.tab .nav-tabs a.nav-link:not(.active) { background-color: #343a4b !important; }
}