/* visible scroll-bars */


/* 1. Set the total width of the scrollbar area */
::-webkit-scrollbar {
	width: 12px;               /* Total width of the track */
}

/* 2. Make the track transparent */
::-webkit-scrollbar-track {
	background: transparent;  
}

/* 3. Style the thumb to look thinner */
::-webkit-scrollbar-thumb {
	background-color: rgb(48 48 48); /* Scrollbar color */
	border-radius: 20px;       /* Fully rounded corners */
	transition:background-color 0.2s;
	/* The "Thin" Trick: */
	border: 3px solid transparent; /* Creates space around the thumb */
	background-clip: padding-box;  /* Prevents color from underlapping the border */
}

/* 4. Optional: Darken on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgb(64 64 64);
}



/* Hidden scrollbar for specific elements */
.main::-webkit-scrollbar,
.stack::-webkit-scrollbar,
.playarea::-webkit-scrollbar {
	width: 0px;
	background-color: #4a4a4a;
}

.stack::-webkit-scrollbar-track,
.verdiv::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.stack::-webkit-scrollbar-thumb,
.verdiv::-webkit-scrollbar-thumb {
	background-color: #656565;
	outline: 0px solid slategrey;
}