.scroll-zone{ align-items: center; background: transparent; display: flex; height: 60px; justify-content: center; left: 0; opacity: 0.2; pointer-events: none; position: absolute; right: 0; transition: opacity 0.5s ease, background 0.5s ease; visibility: visible; width: 280px; z-index: 10; }
.scroll-zone.top{ left: -15px; top: 0px; width: 280px; }
.scroll-zone.bottom{ bottom: -1px; position: fixed; width: 280px; z-index:999999 }
.scroll-zone.active{ background: rgba(0, 0, 0, 0.04); opacity: 1; }
.scroll-zone.hidden{ display: none; }
.scroll-zone span.fas{ color: #555; font: 60px/1 "WebComponentsIcons"; }
.scroll-zone span.fa-arrow-up::before{ content: "\e013" !important; }
.scroll-zone span.fa-arrow-down::before{ content: "\e015" !important; }