/* Windows XP Scrollbar Styles */
:root {
    --scrollbar-bg-url: url("/Images/SVG/winxpscrollbar/scroll-background.svg");
    --scrollbar-bg-horiz-url: url("/Images/SVG/winxpscrollbar/scroll-background-horizontal.svg");
    --scrollbar-thumb-url: url("/Images/SVG/winxpscrollbar/scroll-thumb.svg");
    --scrollbar-thumb-horiz-url: url("/Images/SVG/winxpscrollbar/scroll-thumb-horizontal.svg");
    --arrow-up: url("/Images/SVG/winxpscrollbar/scroll-arrow-up.svg");
    --arrow-down: url("/Images/SVG/winxpscrollbar/scroll-arrow-down.svg");
    --arrow-left: url("/Images/SVG/winxpscrollbar/scroll-arrow-left.svg");
    --arrow-right: url("/Images/SVG/winxpscrollbar/scroll-arrow-right.svg");
}

/* Width and Height of the scrollbar */
::-webkit-scrollbar {
    width: 17px;
    height: 17px;
}

/* The background track */
::-webkit-scrollbar-track:vertical {
    background-image: var(--scrollbar-bg-url);
    background-repeat: repeat-y;
}

::-webkit-scrollbar-track:horizontal {
    background-image: var(--scrollbar-bg-horiz-url);
    background-repeat: repeat-x;
}

/* The draggable thumb */
::-webkit-scrollbar-thumb {
    background-color: #c8d6fb;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid white;
    border-radius: 2px;
    box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
}

::-webkit-scrollbar-thumb:vertical {
    background-image: var(--scrollbar-thumb-url);
    background-size: 7px;
}

::-webkit-scrollbar-thumb:horizontal {
    background-image: var(--scrollbar-thumb-horiz-url);
    background-size: 7px;
}

/* Updated Button Styles to prevent duplicates */
::-webkit-scrollbar-button {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 17px;
    height: 17px;
}

/* Only show the single buttons at the start and end */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    background-image: var(--arrow-up);
}

::-webkit-scrollbar-button:vertical:end:increment {
    background-image: var(--arrow-down);
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background-image: var(--arrow-left);
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background-image: var(--arrow-right);
}

/* The corner where two scrollbars meet */
::-webkit-scrollbar-corner {
    background-color: #dfdfdf; 
}