/* Style for all filter buttons */
    .btn-outline-secondary {
        border: 1px solid #ced4da;
        color: #6c757d;
    }

    hr{margin: 4px 0;}

    /* Hover effect for filter buttons */
    .btn-outline-secondary:hover {
        border-color: #007bff;
        color: #007bff;
    }

    /* Active button style */
    .btn-outline-secondary.active,
    .btn-outline-secondary:focus {
        background-color: #007bff;
        color: white;
        border-color: #0056b3;
    }

    /* Optional: Style for buttons when clicked (focused) */
    .btn-outline-secondary:active {
        background-color: #0056b3;
        border-color: #004085;
        color: white;
    }

    /* You can also apply active styles on hover */
    .btn-outline-secondary.active:hover {
        background-color: #0056b3;
        color: white;
    }

    /* Sidebar Styles */
#sidebar {
    position: fixed;
    left: -75%; /* Initially hidden */
    width: 75%; /* Sidebar width */
    height: 100%;
    background-color: #84b4e8;
    transition: left 0.3s ease-in-out;
    z-index: 10000;
    padding: 5px;
    overflow-y: auto;
}

#sidebar.active {
    left: 0; /* Show sidebar */
}

#sidebarOverlay {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999;
    display: none; /* Initially hidden */
}

#sidebar.active + #sidebarOverlay {
    display: block; /* Show overlay when sidebar is active */
}




.col-md-6 { width: 50%; }

select,input{width: 100%;}

label { padding: 0px; }

.card-header{padding: 5px;}

#searchInput {background: white !important;padding: 12px !important;}

.date input, .date select, .date button{font-size: 12px;}

#sidebar select {padding: 5px !important;}


    .filter-box {
        background-color: #f8f9fa;
        border: 1px solid #5696b6;
        border-radius: 8px;
        padding: 6px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .filter-box label {
        font-weight: 600;
        margin-bottom: 8px;
        color: #024ea0;
    }

    .filter-box .form-select,
    .filter-box .form-control {
        border-radius: 6px;
        border: 1px solid #ced4da;
    }

    .filter-box .btn-outline-secondary {
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 12px;
    }

    .filter-box .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: #fff;
    }

    .filter-box .btn-secondary {
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 14px;
    }

/* Add this to your stylesheet or in the style block */
.table {
    width: 100%;
    border-collapse: collapse; /* Ensures the borders of cells are joined */
}

.table th, .table td {
    border: 1px solid #ddd; /* Adds a light grey border around each cell */
    padding: 5px;
    text-align: left; /* Aligns text to the left inside the cells */
}

.table th {
    background-color: #f8f9fa; /* Sets a light background color for headers */
}

.table td {
    background-color: #fff; /* Sets a white background for data cells */
}