Fomantic-UI 溢れたスクロールバーをカスタマイズするには？

/* fomantic-ui でスクロールバーのスタイルが変えられないのはカラーが指定されていることが原因 */
.ui {
  scrollbar-color: initial!important;
}

/* テーブル横移動 */
.x-scrollable {
  overflow-x: auto;
}

/* no-scrollbar クラブがあればスクロールバーを表示しません */
.no-scrollbar {
  scrollbar-width: none;
}

/* 左右のマージン */
.scrollbar-gutter {
  margin:0 14px;
}

/* 色指定 */
.x-scrollable > * {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.x-scrollable::-webkit-scrollbar {
  height: 4px;
}
.x-scrollable::-webkit-scrollbar-track {
  background-color: #fff;
}
.x-scrollable::-webkit-scrollbar-track:hover {
  background: #fff;
}
.x-scrollable::-webkit-scrollbar-thumb {
  background-color: #141E91;
}
.x-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: #141E91;
}