/* Custom scrollbar styles for vertical scrollbars */
::-webkit-scrollbar {
    width: 24px; /* Adjust the width of the scrollbar */
    height: 24px; /* Adjust the height of the scrollbar */
  }
  
  ::-webkit-scrollbar-thumb {
    background: url("https://static.igem.wiki/teams/5149/scrollbar/screenshot-2024-10-02-at-2-10-01-am.webp")
      no-repeat center center;
    background-size: contain;
    border-radius: 50%; /* Make the thumb circular */
    /* min-height: 50px; Increase the minimum height of the thumb */
    /* width: 150%; */
    /* margin-left: -12%; Ensure the thumb width matches the scrollbar width */
    overflow: show; /* Show the thumb even when not scrolling */
    width: auto; /* Auto width to match the image size */
    height: auto; /* Auto height to match the image size */
  }
  
  ::-webkit-scrollbar-track {
    background: url("https://static.igem.wiki/teams/5149/scrollbar/treelog.png")
      no-repeat center center;
    background-size: auto;
    border-radius: 10px; /* Adjust the border-radius to create an oval shape */
    margin: 0 auto; /* Center the track within the scrollbar container */
    height: 50%; /* Make the track take up only half of the scrollbar container */
  }
  
  /* Custom scrollbar styles for horizontal scrollbars */
  ::-webkit-scrollbar:horizontal {
    width: 24px; /* Ensure the width of the horizontal scrollbar matches the vertical scrollbar */
    height: 24px; /* Ensure the height of the horizontal scrollbar matches the vertical scrollbar */
  }
  
  ::-webkit-scrollbar-thumb:horizontal {
    background: url("https://static.igem.wiki/teams/5149/scrollbar/screenshot-2024-10-02-at-2-10-01-am.webp")
      no-repeat center center;
    background-size: contain;
    border-radius: 50%; /* Make the thumb circular */
    /* min-width: 50px; Increase the minimum width of the thumb */
    /* height: 150%; */
    /* margin-top: -12%; Ensure the thumb height matches the scrollbar height */
    transform: rotate(90deg); /* Rotate the thumb image by 90 degrees */
    width: auto; /* Auto width to match the image size */
    height: auto; /* Auto height to match the image size */
  }
  
  ::-webkit-scrollbar-track:horizontal {
    background: url("https://static.igem.wiki/teams/5149/scrollbar/horizontal.png")
      no-repeat center center;
    background-size: auto;
    border-radius: 10px; /* Adjust the border-radius to create an oval shape */
    margin: 0 auto; /* Center the track within the scrollbar container */
    width: 50%; /* Make the track take up only half of the scrollbar container */
  }
  
  /* Custom scrollbar styles for mobile */
  @media (max-width: 768px) {
    ::-webkit-scrollbar {
      width: 16px; /* Adjust the width of the scrollbar for mobile */
      height: 16px; /* Adjust the height of the scrollbar for mobile */
    }
  
    ::-webkit-scrollbar-thumb {
      min-height: 30px; /* Adjust the minimum height of the thumb for mobile */
      width: 24px; /* Ensure the thumb width is larger than the track for mobile */
      margin-left: -4px; /* Center the thumb within the track */
    }
  
    ::-webkit-scrollbar-track {
      max-height: 120px; /* Adjust the maximum height of the track for mobile */
      max-width: 16px; /* Ensure the track width matches the scrollbar width for mobile */
      height: 50%; /* Make the track take up only half of the scrollbar container */
    }
  
    ::-webkit-scrollbar:horizontal {
      width: 16px; /* Ensure the width of the horizontal scrollbar matches the vertical scrollbar for mobile */
      height: 16px; /* Ensure the height of the horizontal scrollbar matches the vertical scrollbar for mobile */
    }
  
    ::-webkit-scrollbar-thumb:horizontal {
      min-width: 30px; /* Adjust the minimum width of the thumb for mobile */
      height: 24px; /* Ensure the thumb height is larger than the track for mobile */
      margin-top: -4px; /* Center the thumb within the track */
    }
  
    ::-webkit-scrollbar-track:horizontal {
      max-width: 120px; /* Adjust the maximum width of the track for mobile */
      max-height: 16px; /* Ensure the track height matches the scrollbar height for mobile */
      width: 50%; /* Make the track take up only half of the scrollbar container */
    }
  }