/* Scrollbar width */
::-webkit-scrollbar {
    width: 10px;
}

/* Scrollbar track (transparent background) */
::-webkit-scrollbar-track {
    background-color: transparent;
    border: 1px solid transparent; /* Optional: border for better visibility */
}

/* Scrollbar thumb (scroll handle) */
::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 8px;
}

/* Scrollbar thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Scrollbar buttons (up and down arrows) */
::-webkit-scrollbar-button {
    background-color: transparent; /* Transparent button background */
    height: 12px; /* Same as scrollbar width */
    background-size: 12px 12px; /* Match icon size to scrollbar width */
}

/* Scrollbar button hover effect */
::-webkit-scrollbar-button:hover {
    background-color: #555;
}

/* Scrollbar button arrows */
::-webkit-scrollbar-button:single-button:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l6 6H6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;    
    background-size: 12px 12px; /* Adjust size to scrollbar width */
}

::-webkit-scrollbar-button:single-button:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 24 24'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px; /* Adjust size to scrollbar width */
}