.border{
    border: 2px solid rgb(255, 255, 255);
   
 }

 .flex{
    display: flex;
 }
 .justify-center{
    justify-content: center;
 }
 .item-center{
    align-items: center;
 }

 .bg-grey{
    background-color: #121212;
 }
 .bg-black{
    background-color: black;
 }
 .rounded{
    border-radius: 10px;
 }
 .invertColor{
   filter: invert(1);
 }

 /* Apply styles to the scrollbar */
::-webkit-scrollbar {
   width: 10px; /* Width of the scrollbar */
   height: 10px; /* Height of the scrollbar (for horizontal scrollbars) */
}

/* Track (background of the scrollbar) */
::-webkit-scrollbar-track {
   background: #1e1e1e; /* Dark background color for the track */
   border-radius: 5px; /* Rounded corners for the track */
}

/* Thumb (the scrolling element) */
::-webkit-scrollbar-thumb {
   background: #444; /* Dark gray thumb */
   border-radius: 5px; /* Rounded corners for the thumb */
   border: 2px solid #1e1e1e; /* Add space around the thumb by matching track color */
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
   background: #666; /* Lighter gray when hovered */
}

/* Horizontal scrollbar (optional) */
::-webkit-scrollbar-horizontal {
   height: 10px; /* Same height as defined for the scrollbar */
}











input[type="range"] {
   -webkit-appearance: none; /* Remove default styles for WebKit browsers */
   width: 70px; /* Adjust width */
   height: 4px; /* Make the slider thin */
   background: #99794b; /* Track background color */
   outline: none;
   border-radius: 5px; /* Rounded corners for track */
}

/* Custom thumb (the draggable circle) */
input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px; /* Thumb size */
   height: 12px;
   background: darkorange; /* Thumb color */
   border-radius: 50%; /* Circular thumb */
   cursor: pointer;
   border: 2px solid #333; /* Border for better visibility */
}

/* Custom thumb for Mozilla Firefox */
input[type="range"]::-moz-range-thumb {
   width: 12px;
   height: 12px;
   background: darkorange;
   border-radius: 50%;
   cursor: pointer;
   border: 2px solid #333;
}


/* Track styling for Firefox */
/* input[type="range"]::-moz-range-track {
   height: 4px;
   background: #c56c34;
   border-radius: 5px;
} */

/* Focus styling */
input[type="range"]:focus {
   outline: none;
}