/* General scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width of the vertical scrollbar */
    height: 12px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f0f2f5; /* Track color */
    border-radius: 10px; /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
    background: #007bff; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
    transition: background-color 0.3s; /* Smooth color transition */
}

::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* Darker blue on hover */
}

/* General scrollbar styling for Firefox */
* {
    scrollbar-width: thin; /* Slim scrollbar */
    scrollbar-color: #007bff #f0f2f5; /* Thumb color and track color */
}

/* Ensure scrollbars are visible for older versions of Edge and IE 11 */
.scrollable {
    -ms-overflow-style: scrollbar; /* Ensures scrollbar is visible */
}