/* #region scrollbar */

/* [REFERENCE]: http://www.hongkiat.com/blog/css-scroll-bar/ */
/* [REFERENCE]: https://css-tricks.com/almanac/properties/s/scrollbar/ */
::-webkit-scrollbar { width:12px; background-color:transparent; background-image:none; }
::-webkit-scrollbar:horizontal { height:12px; }
::-webkit-scrollbar * { background-color:transparent; background-image:none; }
::-webkit-scrollbar-button {}
::-webkit-scrollbar-button:horizontal:decrement:hover { /* select the down or left scroll button when it's being hovered by the mouse */ }
::-webkit-scrollbar-track { border-radius:0px; background-color:transparent; }
::-webkit-scrollbar-track-piece { background-color: transparent; }
::-webkit-scrollbar-thumb { box-shadow:inset 0 0 0 4px rgba(62,75,90,0.5); border-radius:6px; outline:0; background-color:transparent; border:3px solid rgba(0, 0, 0, 0); }
::-webkit-scrollbar-thumb:window-inactive { /* select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-track-piece:start { /* select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-corner {}
::-webkit-resizer {}

/* sidemenu - scrollbar only on hover */
body #side-menu .menu-wrapper .menu::-webkit-scrollbar-thumb,
body #side-menu .menu-wrapper .menu .side-menu-nav::-webkit-scrollbar-thumb
{ box-shadow:inset 0 0 0 4px rgba(62,75,90,0); }
body #side-menu .menu-wrapper:hover .menu::-webkit-scrollbar-thumb,
body #side-menu .menu-wrapper:hover .menu .side-menu-nav::-webkit-scrollbar-thumb
{ box-shadow:inset 0 0 0 4px rgba(62,75,90,0.5); }

/* custom select scrollbar, ui-autocomplete */
body .ui-autocomplete::-webkit-scrollbar { box-shadow:inset 1px 0 0 0 rgba(79,93,106,0.5), inset 0 0 0 6px #768B9D; }
body .selecter ::-webkit-scrollbar { box-shadow:inset 1px 0 0 0 rgba(79,93,106,0.5); border-radius:0 5px 5px 0;}
body .selecter ::-webkit-scrollbar-thumb,
body .ui-autocomplete::-webkit-scrollbar-thumb
{ box-shadow:inset 0 0 0 4px #4F5D6A; }

body .group .items .selecter ::-webkit-scrollbar { box-shadow:inset 12px 0 0 0 rgba(255,255,255,0.33), inset 1px 0 0 0 rgba(110,129,140,0.2); border-radius:0 5px 5px 0;}
body .group .items .selecter ::-webkit-scrollbar-thumb { box-shadow:inset 0 0 0 4px rgba(62,75,90,0.5); }

/* scrollbar with dark background */
body #side-menu > .overlay[data-preview="normal"] ::-webkit-scrollbar,
body .home-page-nav-wrap::-webkit-scrollbar 
{ border-radius:0 5px 5px 0; }
body #side-menu > .overlay[data-preview="normal"] ::-webkit-scrollbar-thumb,
body .home-page-nav-wrap::-webkit-scrollbar-thumb 
{ box-shadow:inset 0 0 0 4px #5F707D; }

/* area-options scrollbar */
body #side-menu  .menu-wrapper .menu.area-options::-webkit-scrollbar-thumb { box-shadow:inset 0 0 0 4px #2E3F50; }
body #side-menu  .menu-wrapper .menu.area-options .selecter ::-webkit-scrollbar-thumb,
body #side-menu  .menu-wrapper .menu.area-options .ui-autocomplete::-webkit-scrollbar-thumb
{ box-shadow:inset 0 0 0 4px #3E4B5A; }
body #side-menu  .menu-wrapper .menu.area-options .selecter ::-webkit-scrollbar { box-shadow:inset 12px 0 0 0 rgba(118,139,157,0.25); border-radius:0 5px 5px 0;}

/* light scrollbar on dark background */
#side-menu #survey-completed-article::-webkit-scrollbar-thumb,
.bg-entrance::-webkit-scrollbar-thumb,
.dialog-back::-webkit-scrollbar-thumb,
body .template-presentation::-webkit-scrollbar-thumb,
.bg-entrance::-webkit-scrollbar-thumb,
[data-menu-type="page"] article.menu.bg-entrance::-webkit-scrollbar-thumb,
[data-menu-type="page"] article.menu.bg-entrance ::-webkit-scrollbar-thumb
{ box-shadow:inset 0 0 0 4px rgba(255,255,255,0.5); }

/* #endregion */