/* General Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.4; /* Reduced line-height */
    padding: 10px; /* Reduced padding for smaller overall content */
}

h3 {
    color: #333;
    margin-bottom: 15px; /* Reduced margin */
    font-size: 1.2rem; /* Reduced font size */
}

.card {
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    margin-bottom: 15px; /* Reduced margin */
    padding: 10px; /* Reduced padding */
    background-color: #f8f9fa;
}

.card-body {
    padding: 10px; /* Reduced padding */
}

.shifted-heading {
    margin-top: 30px; /* Reduced margin */
}

/* Grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four columns by default */
    gap: 10px; /* Space between grid items */
}

/* Grid header styles */
.grid-header {
    font-weight: bold;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ddd; /* Added border for better visibility */
}

/* Grid item styles */
.grid-row {
    display: contents; /* Use this to ensure rows are rendered properly */
}

    .grid-row > div {
        padding: 10px;
        border: 1px solid #ddd; /* Added border for clarity */
        border-radius: 0.25rem; /* Rounded corners for grid items */
        background-color: #fff; /* Background color for grid items */
    }

    /* Adjust input fields inside the grid */
    .grid-row input {
        width: 100%; /* Full width for inputs */
        padding: 0.5rem; /* Consistent padding */
        border: 1px solid #ced4da; /* Match with form-control */
        border-radius: 0.25rem; /* Match with form-control */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
    }

    /* Adjust grid item styles for smaller screens */
    .grid-row > div {
        padding: 8px; /* Reduced padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column for mobile devices */
    }

    /* Further adjust grid item styles */
    .grid-row > div {
        padding: 5px; /* Further reduced padding for mobile */
    }
}

/* Button styles */
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    padding: 8px 16px; /* Reduced padding */
    font-size: 0.9rem; /* Reduced font size */
    border-radius: 4px; /* Slightly smaller border-radius */
}

    .btn-primary:hover {
        color: #fff;
        background-color: #0056b3;
        border-color: #004085;
    }

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}