.scroll-v, .scroll-h {
    position: absolute;
    visibility: inherit;
    line-height: 1em;
    box-sizing: border-box;
}
.scroll-v {
    right: 0;   /* TODO: remove - may be left or right */
    width: 1em;
    top: 0;
    bottom: 0;
}
.scroll-h {
    bottom: 0;  /* TODO: remove - may be top or bottom */
    height: 1em;
    left: 0;
    right: 0;
}

.scroll-v-background, .scroll-h-background {
    position: absolute;
    background-color: #EEEEEE;
    border: thin solid #AAAAAA;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.scroll-v-background {
}
.scroll-h-background {
}

.scroll-v-reverse, .scroll-v-forward, .scroll-h-reverse, .scroll-h-forward {
    position: absolute;
    background-color: #EEEEEE;
    box-sizing: border-box;
    border: thin solid #AAAAAA;
    text-align: center;
    overflow: hidden;
}
.scroll-v-reverse:hover, .scroll-v-forward:hover, .scroll-h-reverse:hover, .scroll-h-forward:hover {
    border: thin solid blue;
}

.scroll-v-reverse, .scroll-v-forward {
    width: 100%;
    height: 1em;
}
.scroll-v-reverse {
    top: 0;
}
.scroll-v-forward {
    bottom: 0;
}
.scroll-h-reverse, .scroll-h-forward {
    width: 1em;
    height: 100%;
}
.scroll-h-reverse {
    left: 0;
}
.scroll-h-forward {
    right: 0;
}
.scroll-v-reverse:before {
    font: var(--font-fa-solid);
    content: "\f0d8";
}
.scroll-v-forward:before {
    font: var(--font-fa-solid);
    content: "\f0d7";
}
.scroll-h-reverse:before {
    font: var(--font-fa-solid);
    content: "\f0d9";
}
.scroll-h-forward:before {
    font: var(--font-fa-solid);
    content: "\f0da";
}
.scroll-v-slider:before {
    font: var(--font-fa-solid);
    content: "\f0c9";
    font-size: .7em;
}
.scroll-h-slider:before {
    font: var(--font-fa-solid);
    content: "\f0c9";
    font-size: .7em;
}

.scroll-v-slider, .scroll-h-slider {
    position: absolute;
    background-color: #CCCCCC;
    box-sizing: border-box;
    border-radius: 2px;
    border: thin solid #88aabb;
    z-index: 0;             /* REVISIT: this had been set to 1; why? */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
}
.scroll-v-slider {
    background: linear-gradient(to right, #EEEEEE, #AAAAAA);
    width: 1em;
}
.scroll-h-slider {
    background: linear-gradient(#EEEEEE, #AAAAAA);
    height: 1em;
}

.scroll-v-slider:hover {
    background: linear-gradient(to right, #ddeeff, #bbccdd);
}
.scroll-h-slider:hover {
    background: linear-gradient(#ddeeff, #bbccdd);
}
.xscrollable-container {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.scrollable-container {
    position: relative;
    xxx-overflow: auto;
    outline: none;
    width: 100%;
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.2;
}
.scrollable-viewport, .scrollable-fixed-viewport {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    /*overflow-x: auto; */   /* TODO: this is to make scrollbar appear in sliding window -- not general solution */
}
.scrollable-fixed-viewport {
    overflow-y: auto;
}