.fl-scrolls {
    overflow: auto;
    position: fixed;
}

.fl-scrolls div {
    overflow: hidden;
    pointer-events: none;
}

.fl-scrolls div::before {
    content: "\A0"; /* fixes #6 */
}

.fl-scrolls,
.fl-scrolls div {
    font-size: 1px;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.fl-scrolls-hidden div::before {
    content: "\A0\A0"; /* changing content fixes eventual bug with widget re-rendering in Chrome */
}

.fl-scrolls-viewport {
    /* It can be any type of positioning except static. Redefine in your CSS as needed */
    position: relative;
}

.fl-scrolls-body {
    overflow: auto;
}

.fl-scrolls-viewport .fl-scrolls {
    position: absolute;
}

.fl-scrolls-hoverable .fl-scrolls {
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

.fl-scrolls-hoverable:hover .fl-scrolls {
    opacity: 1;
}


/* Orientation-specific styles */

.fl-scrolls[data-orientation="horizontal"],
.fl-scrolls:not([data-orientation]) { /* handling cases with no data attribute for backward compatibility */
    bottom: 0;
    min-height: 17px; /* based on https://codepen.io/sambible/post/browser-scrollbar-widths (fixes Amphiluke/handy-scroll#3) */
}

.fl-scrolls[data-orientation="horizontal"] div,
.fl-scrolls:not([data-orientation]) div {
    height: 1px;
}

.fl-scrolls-hidden.fl-scrolls[data-orientation="horizontal"],
.fl-scrolls-hidden.fl-scrolls:not([data-orientation]) {
    bottom:9999px;
}

.fl-scrolls-viewport .fl-scrolls[data-orientation="horizontal"],
.fl-scrolls-viewport .fl-scrolls:not([data-orientation]) {
    left:0;
}

.fl-scrolls[data-orientation="vertical"] {
    right: 0;
    min-width: 17px;
}

.fl-scrolls[data-orientation="vertical"] div {
    width: 1px;
}

.fl-scrolls-hidden.fl-scrolls[data-orientation="vertical"] {
    right: 9999px;
}

.fl-scrolls-viewport .fl-scrolls[data-orientation="vertical"] {
    top: 0;
}