:root {
    --scrollbar-width: 12px;
    --scrollbar-height: 12px;
    --scrollbar-track-color: var(--bs-scrollbar-track-color, #f1f1f1);
    --scrollbar-thumb-color: var(--bs-scrollbar-thumb-color, #888);
    --scrollbar-thumb-border-radius: 6px;
    --scrollbar-thumb-border: 3px solid var(--bs-scrollbar-track-color, #f1f1f1);
    --selection-background: var(--bs-selection-background, #ffb7b7); 
    --selection-color: var(--bs-selection-color, #ffffff); 
}


::-webkit-scrollbar {
    width: var(--scrollbar-width, 12px);
    height: var(--scrollbar-height, 12px);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color, #f1f1f1);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color, #888);
    border-radius: var(--scrollbar-thumb-border-radius, 6px);
    border: var(--scrollbar-thumb-border, 3px solid #f1f1f1);
}


@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin; 
        scrollbar-color: var(--scrollbar-thumb-color, #888) var(--scrollbar-track-color, #f1f1f1); 
    }
}


::selection  {
    background: var(--selection-background, #ffb7b7);
    color: var(--selection-color, #ffffff);
}
::-moz-selection {
    background: var(--selection-background, #ffb7b7);
    color: var(--selection-color, #ffffff);
}