/**
 * @version 2025-05-19
 *
 * default-styles.css
 *
 * Default styles for Tiny Slider
 */

/** controls "prev"/"next" arrows **/
.tns-outer > .tns-controls {
	width: 100%;
	z-index: 1;
	border: 0px solid red;
}
/* Trying 'transform: translate' */
.tns-outer {
   position: relative;
 }
.tns-outer > .tns-controls {
   /*position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);*/
}
.tns-outer > .tns-controls {
   position: relative;
   top: 50%;
   left: 0%;
   transform: translate(0%, -50%);
   /* The height must be 0 for avoiding the problem of touch scrolling in the middle of the picture */
   height: 0px; /* it is ok because the containing > buttons are float: left and float: right */
}
html.touch-screen-mode .tns-outer > .tns-controls {
	/*display: none;*/
}

.tns-outer.transitionStart .tns-controls i.fa {
	color: #fff;
}

.tns-item {
	cursor: e-resize;
}

.tns-slider.one-slide .tns-item {
	cursor: auto;
}

.tns-horizontal.tns-subpixel {
	/*display: flex;*/
}
.tns-horizontal.tns-subpixel > .tns-item {
	/*height: 380px;*/
}

.tns-outer > .tns-nav {
	/*position: absolute;
	bottom: 0;*/
}

.tns-outer > .tns-controls > button {
	float: right;
}

.tns-outer > .tns-controls > button:FIRST-CHILD {
	float: left;
}

.tns-outer > .tns-controls {
	text-align: center;
	margin-top: clamp(-10px, -0.625rem, 0);
	margin-bottom: clamp(0px, 0.625rem, 10px);
}
:root[data-font-size="big"] .tns-outer > .tns-controls {
	margin-top: clamp(-10px, -0.425rem, 0);
	margin-bottom: clamp(10px, 0.425rem, 0);
}
.tns-outer > .tns-controls [aria-controls] {
  font-size: 15px;
  margin: 0 0px;
  padding: 0 1em;
  height: 2.5em;
  color: #000;
  background: none;
  border: 0;
}
.lt-ie9 .tns-outer > .tns-controls > [aria-controls] {
  line-height: 2.5em;
}
/*[data-action] {
  display: block;
  margin: 10px auto;
  font-size: 17px;
  min-width: 3em;
  text-align: center;
  background: transparent;
  border: 0;
}*/
.tns-outer > .tns-controls [disabled] {
    /*display: none;*/ /* OFF because by hiding the arrows the pictures bottom is cutting */
	color: #fff; /* ON: better strategy is to hide the FontAwesome arrows */
}
.tns-nav {
  text-align: center;
  margin: 10px 0;
}
.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}
.tns-nav > .tns-nav-active { background: #999; }

/*** Slider items ****/