.scrollable { position: relative; padding-right: 30px; }
.scrollable:focus { outline: 0; }
.scrollable .viewport { position: relative; overflow: hidden; }
.scrollable .viewport .overview { position: absolute; }
.scrollable .scroll-bar { display: none; }
.scrollable .scroll-bar.vertical { position: absolute; right: 9px; height: 100%; }
.scrollable .scroll-bar.horizontal { position: relative; width: 100%; }
.scrollable .scroll-bar .thumb { position: absolute; }
.scrollable .scroll-bar.vertical .thumb { width: 100%; min-height: 10px; cursor: pointer; }
.scrollable .scroll-bar.vertical .thumb .bullet-point { width: 4px; height: 2px; background-color: rgba(41, 52, 67, 0.5); position: absolute; top:50%; left: 50%; margin-left: -2px; }
.scrollable .scroll-bar.vertical .thumb .bullet-point.bullet-top { margin-top:-7px; }
.scrollable .scroll-bar.vertical .thumb .bullet-point.bullet-middle { margin-top:-1px; }
.scrollable .scroll-bar.vertical .thumb .bullet-point.bullet-bottom { margin-top: 5px; }
.scrollable .scroll-bar.horizontal .thumb { height: 100%; min-width: 10px; left: 5px; cursor: pointer; }
.scrollable .scroll-bar.horizontal .thumb .bullet-point { width: 2px; height: 2px; background-color: rgba(41, 52, 67, 0.5); position: absolute; top:50%; left: 50%; margin-top: -1px; }
.scrollable .scroll-bar.horizontal .thumb .bullet-point.bullet-top { margin-left:-7px; }
.scrollable .scroll-bar.horizontal .thumb .bullet-point.bullet-middle { margin-left:-1px; }
.scrollable .scroll-bar.horizontal .thumb .bullet-point.bullet-bottom { margin-left: 5px; }
.not-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/*START defaultSkin*/

.scrollable.defaultSkin .scroll-bar.vertical { width: 8px; }
.scrollable.defaultSkin .scroll-bar.horizontal { height: 12px; bottom: 5px; }
.scrollable.defaultSkin .scroll-bar.vertical .thumb { opacity: 0.2; background-color: #ffffff; border: 1px solid rgba(41, 52, 67, 0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.scrollable.defaultSkin .scroll-bar.horizontal .thumb { background-color: #ffffff; border: 1px solid rgba(41, 52, 67, 0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

/*END defaultSkin*/
/*START graySkin*/

.scrollable.graySkin .scroll-bar.vertical { width: 8px; }
.scrollable.graySkin .scroll-bar.horizontal { height: 12px; bottom: 5px; }
.scrollable.graySkin .scroll-bar.vertical .thumb { opacity: 0.1; background-color: #293443; border: 1px solid rgba(41, 52, 67, 0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.scrollable.graySkin .scroll-bar.horizontal .thumb { background-color: #293443; border: 1px solid rgba(41, 52, 67, 0.4); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.scrollable.graySkin .scroll-bar.vertical .thumb .bullet-point { background-color: rgba(255, 255, 255, 1); position: absolute; top:50%; left: 50%; margin-left: -2px; }

/*END backgroundGraySkin*/

@media (min-width: 767px){
	
	/*Default skin*/
	
	.scrollable.default-skin { padding-right: 30px; }
}