:root{
    --rounded-scroll-width : 16px;
    --rounded-scroll-dimension : 6px;
    --rounded-scroll-offset : 5px;
    --rounded-scroll-handle-offset : 3px;
    --rounded-scroll-track-width : 2px;
    --rounded-scroll-track-margin-offset : -1px;

    --dark-scroll-offset : 5px;
    --dark-scroll-width : 16px;
    --dark-scroll-track-width : 5px;
    --dark-scroll-track-margin-offset : 0px;
    --dark-scroll-hover-track-width : 6px;
    --dark-scroll-track-radius : 4px;
    --dark-scroll-hover-track-margin-offset : -3px;
    --dark-scroll-handle-radius : 6px;
    --dark-scroll-handle-max-dimension : 50px;
    --dark-scroll-handle-min-dimension : 20px;
    --dark-scroll-horizontal-handle-max-dimension : 60px;


    --transparent-scroll-track-width : 3px;
}
/*
scroll-dark
*/
.scroll-dark > .os-scrollbar-horizontal {
    right: var(--dark-scroll-offset);
    left: var(--dark-scroll-offset);
    height: var(--dark-scroll-width);
}
.scroll-dark > .os-scrollbar-vertical {
    top: var(--dark-scroll-offset);
    bottom: var(--dark-scroll-offset);
    width: var(--dark-scroll-width);
}
.scroll-dark > .os-scrollbar-corner {
    height: var(--dark-scroll-width);
    width: var(--dark-scroll-width);
    background-color: transparent;
}
.scroll-dark > .os-scrollbar > .os-scrollbar-track {
    background: transparent;
}
.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--light-border);
}
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track:before,
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    top: var(--dark-scroll-offset);
    bottom: var(--dark-scroll-offset);
    border-radius: var(--dark-scroll-track-radius);
    width: var(--dark-scroll-track-width);
    left: 50%;
    margin-left: var(--dark-scroll-track-margin-offset);
    background: rgba(0, 0, 0, 0.1) !important;
}
.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    height: var(--dark-scroll-hover-track-width);
    margin-top: var(--dark-scroll-hover-track-margin-offset);
}
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    width: var(--dark-scroll-hover-track-width);
    margin-left: var(--dark-scroll-hover-track-margin-offset);
}
.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
    height: 100%;
    max-width: var(--dark-scroll-horizontal-handle-max-dimension);
    min-width: var(--dark-scroll-handle-min-dimension);
}
.scroll-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
    width: 100%;
    min-height: var(--dark-scroll-handle-min-dimension);
    max-height: var(--dark-scroll-horizontal-handle-max-dimension);
}
.scroll-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: height 0.3s, margin-top 0.3s, background 0.2s;
}
.scroll-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
    transition: width 0.3s, margin-left 0.3s, background 0.2s;
}


.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.scroll-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    left: var(--dark-scroll-offset);
    right: var(--dark-scroll-offset);
    border-radius: var(--dark-scroll-track-radius);
    height: var(--dark-scroll-track-width);
    top: 50%;
    margin-top: var(--dark-scroll-track-margin-offset);
    background: transparent !important;
}
.scroll-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    content: '';
    display: block;
    position: absolute;
    background:  var(--mottled-lighter) !important;
    border-radius: var(--dark-scroll-handle-radius);
}
.scroll-dark > .os-scrollbar.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    background:  transparent !important;
}
.scroll-dark.shown > .os-scrollbar.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    background:  var(--mottled-lighter) !important;
}
.scroll-dark.shown > .os-scrollbar-horizontal > .os-scrollbar-track:before,
.scroll-dark.shown > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: rgba(0, 0, 0, 0.1) !important;
}