.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;
}