/* Mobile styles (max-width: 767px) */
@media (max-width: 767px) {
.content-wrapper>.content {
    padding: 10px !important;
}
}

.btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #5a9bd5;
}

.circle-avatar {
    width: 50px;
    height: 50px;
}
 /* Freezing the # and name columns */
 .table {
    position: relative;
}

.table thead th:nth-child(2),
.table tbody td:nth-child(2) {
    position: sticky;
    left: 0;
    background-color: #fff; /* or the background color of your table */
    z-index: 2; /* Ensure the # column stays on top */
    /* Ensure the width is fixed if you don't want it to shrink */
}

.table thead th:nth-child(3),
.table tbody td:nth-child(3) {
    position: sticky;
    left: 75px; /* Adjust based on the width of the # column */
    background-color: #fff; /* or the background color of your table */
    z-index: 3; /* Ensure the name column is on top of the # column */
    /* Ensure the width is fixed if you don't want it to shrink */ 
}



/* Tablet styles (min-width: 768px and max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .content-wrapper>.content {
        padding: 15px !important;
    }

    .btn {
        font-size: 0.9375rem;
        padding: 0.5rem 1.25rem;
    }

    .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
    .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
        background-color: #4a89dc;
    }

    .circle-avatar {
        width: 75px;
        height: 75px;
    }
}