/* Styles for Chrome, Safari, and Edge */
::-webkit-scrollbar {
    width: 12px;
    /* width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
    /* background color of the scrollbar track */
    border-radius: 6px;
    /* round the corners of the track */
}

::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    /* color of the scrollbar thumb */
    border-radius: 10px;
    /* fully round the corners of the scrollbar thumb */
    border: 3px solid #f0f0f0;
    /* match the border to the track's background */
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
    /* change thumb color on hover */
}

/* Styles for Firefox */
* {
    scrollbar-width: thin;
    /* 'auto' or 'thin' */
    scrollbar-color: #a0a0a0 #f0f0f0;
    /* thumb and track color */
    scrollbar-border-radius: 10px;
    /* this property is not supported yet, but we can set it for future use */
}

/* Specific styles for elements with .custom-scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Styles for Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #a0a0a0 #f0f0f0;
    /* while Firefox doesn't fully support rounded scrollbars, the color settings will still apply */
}