.custom-container {
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}

#round-card {
    border-radius: 15px; /* Adjust the value as needed for roundness */
    overflow: hidden; /* Optional: Ensures content doesn't overflow the rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for better visual effect */
}

.nav-tabs {
    justify-content: center; /* Center the tabs */
}

.table-responsive {
    margin-top: 20px;
    overflow-x: auto; /* Make the table scrollable */
}

.search-box {
    position: relative;
    text-align: right; /* Corrected invalid 'align' to 'text-align' */
    width: 100%;
    max-width: 35%;
    margin: 20px 0; /* Adds spacing above and below */
    display: flex; /* Enables alignment control for child elements */
    justify-content: flex-end; /* Ensures content is aligned to the right */
}
.search-box input {
    border-radius: 25px; /* Rounded corners */
    padding-left: 40px; /* Space for the icon */
}

.search-box .search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #6c757d; /* Bootstrap text-muted color */
}

.form-control {
    padding-left: 40px; /* Ensures space for the icon */
}

@media (max-width: 768px) {
    .search-box {
        max-width: 100%; /* Full width on smaller screens */
    }
}

/* General styles for table headers */
th {
    text-align: right; /* Default alignment for larger devices */
    padding: 10px; /* Add some spacing for better appearance */
}

/* For mobile devices */
@media (max-width: 768px) {
    th {
        text-align: center; /* Justify the text for mobile view */
    }
}


/* Show the filter inputs only on desktop and tablets */
/* Show the filter row on desktop and tablets */
@media (min-width: 768px) {
    .filter-row {
        display: table-row; /* Makes the row visible */
    }
}

/* Hide the filter row on mobile devices */
@media (max-width: 767px) {
    .filter-row {
        display: none; /* Hides the row on smaller screens */
    }
}