.scroll {
/*  position: relative;*/
  overflow: hidden;
  height: 100%; }
  .scroll.vscroll-noActive > .scroll-bar.vertical {
    display: none; }
  .scroll.hscroll-noActive > .scroll-bar.horizontal {
    display: none; }
  .scroll.scroll-active{
    user-select: none; }
  .scroll.scroll-active > .scroll-bar {
    opacity: 1;
    background: #7e7e7e85; }
  .scroll:hover > .scroll-bar {
    opacity: 1; }

.scroll-body {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden; }

.scroll-bar {
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  position: absolute;
  z-index: 2;
  border-radius: 4px; }
  .scroll-bar:hover {
    background: #70707085; }
  .scroll-bar.vertical {
    right: 0;
    top: 0;
    width: 10px;
    height: 100%; }
    .scroll-bar.vertical .scroll-bar_slider {
      width: 6px;
      right: 2px;
      height: 300px; }
  .scroll-bar.horizontal {
    bottom: 0;
    left: 0;
    height: 10px; }
    .scroll-bar.horizontal .scroll-bar_slider {
      top: 2px;
      left: 0;
      height: 6px; }

.scroll-bar_slider {
  background-color: #4d4d4d;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  position: absolute;
  cursor: pointer; }



.scrollbar-thin-dark {scrollbar-color:rgba(0,0,0,0.3) rgba(0,0,0,0.06); scrollbar-width:thin;}
.scrollbar-thin-dark::-webkit-scrollbar-track {background-color:transparent;}
.scrollbar-thin-dark::-webkit-scrollbar {width:6px; height:6px; background-color:rgba(0,0,0,0.06);}
.scrollbar-thin-dark::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.3); border-radius:30px;}