html, * {
  scrollbar-width: thin;
  scrollbar-color: #444444 #1a1a1a;
}
::-webkit-scrollbar {
  width: 22px;  
  height: 22px; 
  background-color: #1a1a1a;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-corner {
  background-color: #121212;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-track {
  background-color: #1a1a1a;
  box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.8), inset -1px 0 1px rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-track:horizontal {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  background-color: #444444;
  background-size: 12px 12px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  border: 1px solid #0a0a0a;
  border-radius: 3px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none !important;
}
::-webkit-scrollbar-thumb:vertical {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><line x1='2' y1='2' x2='10' y2='2' stroke='%23999999' stroke-width='1.5'/><line x1='2' y1='4' x2='10' y2='4' stroke='%23999999' stroke-width='1.5'/><line x1='2' y1='6' x2='10' y2='6' stroke='%23999999' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to bottom, transparent, transparent 2px, #333333 2px, #333333 4px), 
    linear-gradient(to right, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-top: 1px solid #777;
  border-left: 1px solid #666;
}
::-webkit-scrollbar-thumb:horizontal {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'><line x1='2' y1='2' x2='2' y2='10' stroke='%23999999' stroke-width='1.5'/><line x1='4' y1='2' x2='4' y2='10' stroke='%23999999' stroke-width='1.5'/><line x1='6' y1='2' x2='6' y2='10' stroke='%23999999' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to right, transparent, transparent 2px, #333333 2px, #333333 4px), 
    linear-gradient(to bottom, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-left: 1px solid #777;
  border-top: 1px solid #666;
}
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 4l-10 14h20z' fill='%23999999'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #333333 2px, #333333 4px), linear-gradient(to right, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-top: 1px solid #777; border-left: 1px solid #666;
}
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 20l10-14h-20z' fill='%23999999'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #333333 2px, #333333 4px), linear-gradient(to right, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-top: 1px solid #777; border-left: 1px solid #666;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M4 12l14-10v20z' fill='%23999999'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #333333 2px, #333333 4px), linear-gradient(to bottom, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-left: 1px solid #777; border-top: 1px solid #666;
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M20 12l-14 10v-20z' fill='%23999999'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #333333 2px, #333333 4px), linear-gradient(to bottom, #5a5a5a 0%, #3e3e3e 40%, #2b2b2b 100%);
  border-left: 1px solid #777; border-top: 1px solid #666;
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><line x1='2' y1='2' x2='10' y2='2' stroke='%23ffffff' stroke-width='1.5'/><line x1='2' y1='4' x2='10' y2='4' stroke='%23ffffff' stroke-width='1.5'/><line x1='2' y1='6' x2='10' y2='6' stroke='%23ffffff' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to bottom, transparent, transparent 2px, #444444 2px, #444444 4px), 
    linear-gradient(to right, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'><line x1='2' y1='2' x2='2' y2='10' stroke='%23ffffff' stroke-width='1.5'/><line x1='4' y1='2' x2='4' y2='10' stroke='%23ffffff' stroke-width='1.5'/><line x1='6' y1='2' x2='6' y2='10' stroke='%23ffffff' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to right, transparent, transparent 2px, #444444 2px, #444444 4px), 
    linear-gradient(to bottom, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 4l-10 14h20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #444444 2px, #444444 4px), linear-gradient(to right, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-button:vertical:end:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 20l10-14h-20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #444444 2px, #444444 4px), linear-gradient(to right, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-button:horizontal:start:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M4 12l14-10v20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #444444 2px, #444444 4px), linear-gradient(to bottom, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-button:horizontal:end:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M20 12l-14 10v-20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #444444 2px, #444444 4px), linear-gradient(to bottom, #6c6c6c 0%, #4a4a4a 40%, #333333 100%);
}
::-webkit-scrollbar-thumb:vertical:active {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><line x1='2' y1='2' x2='10' y2='2' stroke='%23ffffff' stroke-width='1.5'/><line x1='2' y1='4' x2='10' y2='4' stroke='%23ffffff' stroke-width='1.5'/><line x1='2' y1='6' x2='10' y2='6' stroke='%23ffffff' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to bottom, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), 
    linear-gradient(to right, #aa1111 0%, #880000 40%, #550000 100%);
  border-top: 1px solid #b53333; border-left: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb:horizontal:active {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'><line x1='2' y1='2' x2='2' y2='10' stroke='%23ffffff' stroke-width='1.5'/><line x1='4' y1='2' x2='4' y2='10' stroke='%23ffffff' stroke-width='1.5'/><line x1='6' y1='2' x2='6' y2='10' stroke='%23ffffff' stroke-width='1.5'/></svg>"),
    repeating-linear-gradient(to right, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), 
    linear-gradient(to bottom, #aa1111 0%, #880000 40%, #550000 100%);
  border-left: 1px solid #b53333; border-top: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-button:vertical:start:decrement:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 4l-10 14h20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), linear-gradient(to right, #aa1111 0%, #880000 40%, #550000 100%);
  border-top: 1px solid #b53333; border-left: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-button:vertical:end:increment:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M12 20l10-14h-20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to bottom, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), linear-gradient(to right, #aa1111 0%, #880000 40%, #550000 100%);
  border-top: 1px solid #b53333; border-left: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-button:horizontal:start:decrement:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M4 12l14-10v20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), linear-gradient(to bottom, #aa1111 0%, #880000 40%, #550000 100%);
  border-left: 1px solid #b53333; border-top: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-button:horizontal:end:increment:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M20 12l-14 10v-20z' fill='%23ffffff'/></svg>"), repeating-linear-gradient(to right, transparent, transparent 2px, #aa1111 2px, #aa1111 4px), linear-gradient(to bottom, #aa1111 0%, #880000 40%, #550000 100%);
  border-left: 1px solid #b53333; border-top: 1px solid #a32222; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.8);
}