/* ================================
   PREMIUM MINIMAL SCROLLBARS
   almost invisible / always neat
   ================================ */

:root{
  --sb-size: 5px;
  --sb-radius: 999px;

  --sb-track: transparent;
  --sb-track-hover: rgba(255,255,255,0.025);

  --sb-thumb: rgba(255,255,255,0.10);
  --sb-thumb-hover: rgba(255,255,255,0.18);
  --sb-thumb-active: rgba(198,219,78,0.55);

  --sb-shadow: none;
}

/* Firefox */
html,
body,
*{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.10) transparent !important;
}

/* Chromium / WebKit */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width: var(--sb-size) !important;
  height: var(--sb-size) !important;
  background: transparent !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track{
  background: var(--sb-track) !important;
  border-radius: var(--sb-radius) !important;
  box-shadow: var(--sb-shadow) !important;
  margin: 0 !important;
}

html::-webkit-scrollbar-track:hover,
body::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:hover{
  background: var(--sb-track-hover) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{
  background: var(--sb-thumb) !important;
  border-radius: var(--sb-radius) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 36px !important;
  min-width: 36px !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover) !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner{
  background: transparent !important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ключевые контейнеры */
.app-ScrollBox,
.app-l-ScrollBox,
.app-r-ScrollBox,
.notifications-block2,
.hours-app-block2,
.stats-app-block2,
.app-block,
.app-block2,
.modal-content,
.modal-positionDescription,
.x-scroll{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.10) transparent !important;
}

.app-ScrollBox::-webkit-scrollbar,
.app-l-ScrollBox::-webkit-scrollbar,
.app-r-ScrollBox::-webkit-scrollbar,
.notifications-block2::-webkit-scrollbar,
.hours-app-block2::-webkit-scrollbar,
.stats-app-block2::-webkit-scrollbar,
.app-block::-webkit-scrollbar,
.app-block2::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-positionDescription::-webkit-scrollbar,
.x-scroll::-webkit-scrollbar{
  width: var(--sb-size) !important;
  height: var(--sb-size) !important;
}

.app-ScrollBox::-webkit-scrollbar-track,
.app-l-ScrollBox::-webkit-scrollbar-track,
.app-r-ScrollBox::-webkit-scrollbar-track,
.notifications-block2::-webkit-scrollbar-track,
.hours-app-block2::-webkit-scrollbar-track,
.stats-app-block2::-webkit-scrollbar-track,
.app-block::-webkit-scrollbar-track,
.app-block2::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal-positionDescription::-webkit-scrollbar-track,
.x-scroll::-webkit-scrollbar-track{
  background: transparent !important;
  border-radius: var(--sb-radius) !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.app-ScrollBox::-webkit-scrollbar-thumb,
.app-l-ScrollBox::-webkit-scrollbar-thumb,
.app-r-ScrollBox::-webkit-scrollbar-thumb,
.notifications-block2::-webkit-scrollbar-thumb,
.hours-app-block2::-webkit-scrollbar-thumb,
.stats-app-block2::-webkit-scrollbar-thumb,
.app-block::-webkit-scrollbar-thumb,
.app-block2::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal-positionDescription::-webkit-scrollbar-thumb,
.x-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
}

.app-ScrollBox::-webkit-scrollbar-thumb:hover,
.app-l-ScrollBox::-webkit-scrollbar-thumb:hover,
.app-r-ScrollBox::-webkit-scrollbar-thumb:hover,
.notifications-block2::-webkit-scrollbar-thumb:hover,
.hours-app-block2::-webkit-scrollbar-thumb:hover,
.stats-app-block2::-webkit-scrollbar-thumb:hover,
.app-block::-webkit-scrollbar-thumb:hover,
.app-block2::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-positionDescription::-webkit-scrollbar-thumb:hover,
.x-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.18) !important;
}

.app-ScrollBox::-webkit-scrollbar-thumb:active,
.app-l-ScrollBox::-webkit-scrollbar-thumb:active,
.app-r-ScrollBox::-webkit-scrollbar-thumb:active,
.notifications-block2::-webkit-scrollbar-thumb:active,
.hours-app-block2::-webkit-scrollbar-thumb:active,
.stats-app-block2::-webkit-scrollbar-thumb:active,
.app-block::-webkit-scrollbar-thumb:active,
.app-block2::-webkit-scrollbar-thumb:active,
.modal-content::-webkit-scrollbar-thumb:active,
.modal-positionDescription::-webkit-scrollbar-thumb:active,
.x-scroll::-webkit-scrollbar-thumb:active{
  background: rgba(198,219,78,0.55) !important;
}