/**
TINY SLIDER - CUSTOM STYLES
 */
/**
TINY SLIDER CUSTOM STYLES
 */
html {
  --tns-nav-dot-bgcolor: #ebebeb;
  --tns-nav-dot-bgcolor-active: #333;
  --tns-nav-dot-bgcolor-hover: var(--tns-nav-dot-bgcolor-active);
  --tns-nav-dot-border: 1px solid #ebebeb;
  --tns-nav-dot-border-active: 1px solid var(--tns-nav-dot-bgcolor-active);
  --tns-nav-dot-border-radius: 50%;
  --tns-nav-dot-width: 10px;
  --tns-nav-dot-height: 10px;
  --tns-control-color: #333;
  --tns-control-color-hover: #333;
  --tns-control-bgcolor: transparent;
  --tns-control-bgcolor-hover: #ebebeb;
  --tns-control-width: 35px;
  --tns-control-height: 35px;
}

.tns-nav {
  text-align: center;
}
.tns-nav > button {
  padding: 0;
  width: var(--tns-nav-dot-width);
  height: var(--tns-nav-dot-height);
  background-color: var(--tns-nav-dot-bgcolor);
  border: var(--tns-nav-dot-border);
  border-radius: var(--tns-nav-dot-border-radius);
  margin: 0 2px;
}
.tns-nav > button:hover, .tns-nav > button.tns-nav-active {
  background-color: var(--tns-nav-dot-bgcolor-active);
  border: var(--tns-nav-dot-border-active);
}

.tns-controls {
  text-align: center;
}
.tns-controls > button {
  padding: 0;
  color: var(--tns-control-color);
  width: var(--tns-control-width);
  height: var(--tns-control-height);
  background-color: var(--tns-control-bgcolor);
  margin: 0 2px;
  border: none;
}
.tns-controls > button:hover, .tns-controls > button.tns-nav-active {
  color: var(--tns-control-color-hover);
  background-color: var(--tns-control-bgcolor-hover);
}

.ce_rsce_tiny_slider_horizontal_content_start.controls--center .tns-controls > button {
  --tns-control-bgcolor: rgba(255, 255, 255, .5);
  --tns-control-bgcolor-hover: rgba(255, 255, 255, .8);
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}
.ce_rsce_tiny_slider_horizontal_content_start.controls--center .tns-controls > button[data-controls=prev] {
  left: 0;
}
.ce_rsce_tiny_slider_horizontal_content_start.controls--center .tns-controls > button[data-controls=next] {
  right: 0;
}

html {
  --tns-nav-dot-bgcolor-active: var(--color-brand2);
  --tns-nav-dot-border-active: var(--color-brand2);
}

.ce_rsce_tiny_slider_vertical_content_start {
  padding-right: 20px;
}
.ce_rsce_tiny_slider_vertical_content_start .tns-nav {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid var(--color-brand);
  padding: 5px;
  border-radius: 15px;
  min-height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-gap: 8px;
}