button[data-controls=prev],
button[data-controls=next] {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  border: none;
  padding: 0;
  appearance: none;
  z-index: 1;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
  background: transparent;
}
button[data-controls=prev]::before,
button[data-controls=next]::before {
  background-color: var(--slider-default-arrow-bg-color, #f8f9fa);
  color: var(--slider-default-arrow-color, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Design Icons", fantasy;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  opacity: 0.9;
  font-size: calc(1.425rem + 1.575vw);
}
@media (min-width: 1600px) {
  button[data-controls=prev]::before,
  button[data-controls=next]::before {
    font-size: 3rem;
  }
}
button[data-controls=prev][disabled],
button[data-controls=next][disabled] {
  visibility: hidden;
}

@media (max-width: 1199.98px) {
  button[data-controls=prev] {
    left: 0;
  }
}
@media (min-width: 1200px) {
  button[data-controls=prev] {
    left: -0.5rem;
  }
}
button[data-controls=prev]::before {
  content: "\F0141";
}

@media (max-width: 1199.98px) {
  button[data-controls=next] {
    right: 0;
  }
}
@media (min-width: 1200px) {
  button[data-controls=next] {
    right: -1rem;
  }
}
button[data-controls=next]::before {
  content: "\F0142";
}

.tns-nav {
  text-align: center;
}
.tns-nav button {
  appearance: none;
  display: inline-block;
  border: 0;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 50%;
}
.tns-nav button:not(:last-child) {
  margin-right: 0.25rem;
}