.scroltable-wrapper {
  position: relative;
  margin: auto -25px 0 -25px;
}

.scroltable-container {
  margin-top: -15px;
  padding: 15px 0;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroltable-container::-webkit-scrollbar {
  display: none;
}

.scroltable-nav {
  display: none;
  position: absolute;
  top: 0;
  padding: 50px 0;
  width: 80px;
  height: 100%;
  background-size: 15px;
  cursor: pointer;
  z-index: 1;
}

.scroltable-nav.scroltable-nav-left {
  width: 40px;
  left: 0;
}

.rtl .scroltable-nav.scroltable-nav-left {
  width: 80px;
  background: -webkit-linear-gradient(-270deg, #fff 30%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(-270deg, #fff 30%, rgba(255, 255, 255, 0) 100%);
}

.scroltable-nav.scroltable-nav-right {
  width: 80px;
  right: 0;
  background: -webkit-linear-gradient(0, rgba(255, 255, 255, 0), #fff);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.rtl .scroltable-nav.scroltable-nav-right {
  width: 40px;
  background: none;
}

.scroltable-nav-arrow.scroltable-nav-arrow-right,
.scroltable-nav-arrow.scroltable-nav-arrow-left {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 100%;
  height: 40px;
}

html.no-overflow-page .scroltable-nav-arrow.scroltable-nav-arrow-right,
body.no-overflow-page .scroltable-nav-arrow.scroltable-nav-arrow-left,
html.no-overflow-page .scroltable-nav-arrow.scroltable-nav-arrow-right,
body.no-overflow-page .scroltable-nav-arrow.scroltable-nav-arrow-left {
  position: sticky;
  margin-top: 0;
}

.scroltable-nav-arrow.scroltable-nav-arrow-left {
  background: url(../images/arrow-left.svg) no-repeat 10px center;
  background: url(../images/arrow-left.svg) no-repeat 10px center;
}

.rtl .scroltable-nav-arrow.scroltable-nav-arrow-left  {
  background: url(../images/arrow-left.svg) no-repeat 10px center;
  background: url(../images/arrow-left.svg) no-repeat 10px center;
}

.scroltable-nav-arrow.scroltable-nav-arrow-right {
  background: url(../images/arrow-right.svg) no-repeat right 10px center;
  background: url(../images/arrow-right.svg) no-repeat right 10px center;
}

.rtl .scroltable-nav-arrow.scroltable-nav-arrow-right  {
  background: url(../images/arrow-right.svg) no-repeat right 10px center;
  background: url(../images/arrow-right.svg) no-repeat right 10px center;
}

@media screen and (min-width:768px) {

  .scroltable-wrapper {
    margin-right: 0;
    margin-left: 0;
  }

}

@media screen and (min-width:1025px) {

  .scroltable-nav-arrow.scroltable-nav-arrow-right,
  .scroltable-nav-arrow.scroltable-nav-arrow-left {
    position: sticky;
    margin-top: 0;
  }

}