:root {
  --color-scrollbar: #d3d3d4;
  --color-bg-scrollbar: #eee;
}

/* SCROLL FIREFOX */
@supports (-webkit-scrollbar: none) {
  .container__table,
  html,
  .items__methods {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
  }
}
/* SCROLL CHROME */
.items__methods::-webkit-scrollbar {
  width: 25px;
  background: transparent;
}

html::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

.container__table::-webkit-scrollbar {
  width: 25px;
  background: transparent;
}

.items__methods::-webkit-scrollbar-thumb {
  border: 10px solid transparent;
  box-shadow: none;
  border-radius: 40px;
}

html::-webkit-scrollbar-thumb {
  border: 10px solid var(--main-color);
  box-shadow: none;
  border-radius: 40px;
}

.container__table::-webkit-scrollbar-thumb {
  border: 10px solid transparent;
  box-shadow: none;
  border-radius: 40px;
}

.items__methods:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.container__table:hover::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 10px var(--color-scrollbar);
}

.items__methods:hover::-webkit-scrollbar-thumb:hover {
  border: 8px solid transparent;
  box-shadow: inset 0 0 0 10px var(--main-color);
}

.container__table:hover::-webkit-scrollbar-thumb:hover {
  border: 8px solid transparent;
  box-shadow: inset 0 0 0 10px var(--main-color);
}

.items__methods::-webkit-scrollbar-track {
  background-color: transparent;
}

html::-webkit-scrollbar-track {
  background-color: transparent;
}

.container__table::-webkit-scrollbar-track {
  background-color: transparent;
}