.scrollable {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%; }

.scrollable-content {
  box-sizing: border-box;
  min-height: 100%; }

.fullwindow .scrollable-content {
  transform: none !important; }

.scrollable .scrollable-content, .scrollable .scrollable-slider {
  -webkit-transition: background-color .2s linear,opacity .2s linear,-webkit-transform .2s ease-out;
  -moz-transition: background-color .2s linear,opacity .2s linear,-moz-transform .2s ease-out;
  -ms-transition: background-color .2s linear,opacity .2s linear,-ms-transform .2s ease-out;
  -o-transition: background-color .2s linear,opacity .2s linear,-o-transform .2s ease-out;
  transition: background-color .2s linear,opacity .2s linear,transform .2s ease-out; }

.scrollable.active .scrollable-content, .scrollable.active .scrollable-slider {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none; }

.scrollable .scrollable-bar {
  position: absolute;
  box-sizing: border-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  opacity: 0;
  background-color: #f0f0f0;
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid transparent; }

.scrollable:hover .scrollable-bar {
  opacity: .6; }

.scrollable .scrollable-bar:hover, .scrollable.active .scrollable-bar {
  opacity: 1; }

.scrollable .scrollable-slider {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: #ccc;
  background-image: linear-gradient(to right, #ccc, #ddd);
  border: 1px solid #333;
  border: 1px solid rgba(0, 0, 0, 0.5); }

.scrollable .scrollable-bar-x .scrollable-slider {
  height: 8px; }

.scrollable .scrollable-bar-y .scrollable-slider {
  width: 8px; }