.opcommScroller {
  scroll-behavior: smooth;
  overflow: auto;
}

  /* 🙄🙄🙄🙄🙄 */

  .opcommScroller::-webkit-scrollbar-track {
    border-left: 2px solid #000000;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000030;
    border-right: 1px solid #00000030;
    box-shadow: rgba(0,0,0,0.3) 0 3px 4px inset;
    background: linear-gradient(180deg, #70a0f0 0%, #4090d0 20%, #50b0d0 80%, #60c0f0 100%); 
  }

  .opcommScroller::-webkit-scrollbar {
    width: 20px; /* Increased width for better accessibility */
    background-color: #F5F5F5;
  }

  .opcommScroller::-webkit-scrollbar-thumb {
    background-color: #0848a0;
    border-left: 2px solid #151515d0;
    border-right: 1px solid #151515a0;
    background: linear-gradient(90deg, #2080f0 0%, #0848a0 5%, #043060 100%); 
    background-position: center 7px, center; /* Offset striped background by 5px */
    background-size: 100% calc(100% - 12px), 100% 100%; /* Restrict striped background height */
    background-clip: content-box, unset;
    border-radius: 10px 8px 8px 10px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); /* Slight shadow for better distinction */
  }

.opcommTextAreaScroller {
  scroll-behavior: smooth;
  overflow: auto;
  border-radius: 0 13px 13px 0;
}

  .opcommTextAreaScroller::-webkit-scrollbar-track {
    background-color: white;
  }

  .opcommTextAreaScroller::-webkit-scrollbar {
    width: 8px; /* Slightly wider */
    border-radius: 0 13px 13px 0;
    background-color: #304080;
  }

  .opcommTextAreaScroller::-webkit-scrollbar-thumb {
    background-color: #082050;
    background: linear-gradient(90deg, #0848a0, #043060); /* Distinct gradient for clarity */
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); /* Shadow for better separation from track */
  }