/* Media query for screens smaller than 768px (e.g., mobile devices) */
@media (max-width: 768px) {
    /* Reduce the size of all buttons */
    .btn {
        transform: scale(0.8); /* Scale buttons to 70% of their original size */
        /* padding: 0.1rem 0.3rem; /* Narrow the inner margins around the text */
        /* font-size: 0.875rem; /* Adjust font size for better readability on smaller buttons */
    }

    .btn-add {
        transform-origin: left; /* Ensure the scaling happens from the left side */
    }

    .pagination {
        transform: scale(0.75); /* Scale down the pagination */
        transform-origin: left; /* Ensure the scaling happens from the left side */
        /* font-size: 0.875rem; /* Adjust font size for better readability on smaller buttons */
        /* margin-left: 0; /* Ensure there's no additional margin on the left */
    }

    .input-group {
        transform: scale(0.75);
        transform-origin: right; /* Ensure the scaling happens from the left side */
        /* font-size: 0.875rem; /* Adjust font size for better readability on smaller buttons */
    }

    .input-group label {
        
        max-width: 50px;
        overflow-wrap: break-word;
    }

    .input-group-append {
        visibility: hidden;
    }

    table {
        font-size: 0.875rem; /* Adjust font size for better readability on smaller buttons */
        overflow-wrap: break-word;
    }

    body > div > div > div.p-4, .card-body {
        /* Your CSS properties here */
        padding: 0 !important;
    }

    /* Center the 3-stripe menu button */
    .navbar-toggler {
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
    }

    /* Optional: Adjust the navbar brand and other elements if necessary */
    .navbar-brand {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 100%;
    }

    .bg-white {
        margin-top: 0;
    }
}