/* Remove border-radius from the entire list-group container */
.list-group {
    max-height: 50vh; /* Set a max height for scrolling */
    overflow-y: auto;  /* Enable vertical scrolling */

    border: 2px solid rgba(255, 255, 255, 0.3); /* 30% opacity white border */
    border-radius: 5px; /* Disable the border-radius */
    
    padding: 10px; /* Add space for scrollbar */
    margin-top: 20px;
    margin-bottom: 20px;
}

.list-group::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.list-group::-webkit-scrollbar-track {
    background: #1f1f1f; /* Track background */
    border-radius: 5px;
}

.list-group::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); /* Scroll thumb with 30% white */
    border-radius: 5px;
    border: 1px solid #444; /* Optional: adds inner border */
}

.list-group::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Darker on hover */
}

/* For tablets (up to 768px) */
@media (min-width: 768px) {
    .list-group {
        max-height: 35vh; /* Set a max height for scrolling */
    }
}

/* For desktops (min-width: 1024px) */
@media (min-width: 1024px) {
    .list-group {
        max-height: 35vh; /* Set a max height for scrolling */
    }
}