// Can use this for debug: http://almaer.com/scrollbar/debug.html

/* Turn on a 13x13 scrollbar */

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

::-webkit-scrollbar-button:vertical {
  //background-color: red;
  //border: 1px dashed blue;
}

/* Turn on single button up on top, and down on bottom */

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: block;
}

/* Turn off the down area up on top, and up area on bottom */

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

/* Place The scroll down button at the bottom */

::-webkit-scrollbar-button:vertical:increment {
  display: none;
}

/* Place The scroll up button at the up */

::-webkit-scrollbar-button:vertical:decrement {
  display: none;
}

::-webkit-scrollbar-track:vertical {
  background-color: rgba(54, 68, 79, .05);
  border-radius: 5px;
}

/* Top area above thumb and below up button */

::-webkit-scrollbar-track-piece:vertical:start {
  border-radius: 5px;
}

/* Bottom area below thumb and down button */

::-webkit-scrollbar-track-piece:vertical:end {
  border-radius: 5px;
}

/* Track below and above */

::-webkit-scrollbar-track-piece {
  background-color: rgba(54, 68, 79, .05);
}

/* The thumb itself */

::-webkit-scrollbar-thumb:vertical {
  width: 8px;
  height: 50px;
  background-color: #d9d8d8;
  border-radius: 5px;
}

/* Corner */

::-webkit-scrollbar-corner:vertical {
  background-color: #000;
}

/* Resizer */

::-webkit-scrollbar-resizer:vertical {
  border-radius: 5px;
}