body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, nav, .nav, button, .btn {
    font-family: 'Space Grotesk', sans-serif;
}
input.form-control {
    /*background-color: var(--pe-gray-100);*/
}
.pagination .page-link:hover {
    background-color: var(--pe-light); !important;
    color: var(--pe-dark); !important;
}
.pagination .page-link.active, .pagination .active>.page-link {
    background-color: var(--pe-light); !important;
    color: var(--pe-dark); !important;
}
div.dataTables_wrapper .dataTables_length {
    padding-left: 0;
}
div.dataTables_wrapper div.dataTables_paginate {
    padding-right: 0;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pe-gray-500);
}
.pe-app-sidebar .pe-app-sidebar-menu .pe-nav-link .pe-nav-icon {
    font-size: 1rem;
}
/* ==========================================================================
   FOOLIX CUSTOM COMPONENTS
   ========================================================================== */

/* Progress Slider
   ========================================================================== */
.progress-slider-container {
    position: relative;
}
.progress-slider-container .progress {
    border-radius: 0.375rem;
}
.progress-slider-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

/* DataTable Column Filters
   ========================================================================== */
.dt-column-filters th {
    padding: 0.5rem 0.5rem 0.75rem;
    background-color: var(--pe-gray-100);
}
[data-bs-theme=dark] .dt-column-filters th {
    background-color: var(--pe-gray-700);
}
.dt-column-filters input {
    font-weight: normal;
    font-size: 0.8125rem;
}
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dataTables_filter input {
    width: auto;
}
.card-body.px-0 .dataTables_wrapper .row.mt-3 {
    padding-inline: 1.5rem;
}