.top-scroll{ overflow: hidden; /*white-space: nowrap;*/ }
.top-scroll.state-scrolling *{ pointer-events: none; }

.top-scroll:hover ~ .top-scroll-bar,
.top-scroll.hover ~ .top-scroll-bar{
/*.top-scroll-bar:hover{*/
	opacity: 1;
}

/*scroll bar */
.top-scroll-bar{
	background: rgba(0,0,0,0.1); position: absolute; overflow: hidden; opacity: 0; z-index: 1;
}
.top-scroll-bar.axis-x{ bottom: 0; transition: opacity 0.3s, height 0.3s; transition-delay: 0s, 1s; }
.top-scroll-bar.axis-y{ right: 0; transition: opacity 0.3s, width 0.3s; transition-delay: 0s, 1s; }
.top-scroll-bar.axis-x:hover,
.top-scroll-bar.axis-x.dragging{ height: 12px !important; transition-delay: 0s, 0s; }
.top-scroll-bar.axis-y:hover,
.top-scroll-bar.axis-y.dragging{ width: 12px !important; transition-delay: 0s, 0s; }

.top-scroll-bar .drag{ cursor: pointer; background: rgba(0,0,0,0.1); }
.top-scroll-bar .drag:hover,
.top-scroll-bar.dragging .drag{ background: rgba(0,0,0,0.2); }
.top-scroll-bar.axis-x .drag{ min-width: 10%; height: 100%; bottom: 0; }
.top-scroll-bar.axis-y .drag{ width: 100%; min-height: 10%; right: 0; }

/* pager */
.top-scroll-pager{
	background: rgba(200, 200, 200, 0.95); padding: 2px 6px 7px 6px; margin: 3px 10px 0 0;
	position: absolute; z-index: 1; display: none; opacity: 0;

	transition: opacity 0.3s;
}

.top-scroll:hover ~ .top-scroll-pager,
.top-scroll.hover ~ .top-scroll-pager{ opacity: 1; }

.top-scroll-pager i{
	cursor: pointer;
	border-bottom: 1px solid #FFF; padding: 1px 3px;
	color: #FFF; font-weight: 600; font-size: 14px; font-style: normal;
}
.top-scroll-pager i.active ~ i{ border-color: #EEE; color: #EEE; }
.top-scroll-pager i.active{ border-bottom-width: 4px; }
.top-scroll-pager i:hover{ color: #FFF !important;  }