[data-progress] {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.progress-container {
    margin-top: -5px;
    margin-bottom: -5px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
}
.progress-container.placement-left {
    margin-left: -36px;
}
.progress-container.placement-right {
    margin-right: -36px;
}

/***************
*** LOADERS ***
****************/

.loader-wave {
    width: max-content;
    height: 1rem;
    margin: 0 auto;
    text-align: center;
    font-size: 0;
}
.loader-wave > div {
    background-color: #ffffff;
    margin-right:2px;
    height: 100%;
    width: 3px;
    display: inline-block;  
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.loader-wave.dark-style div { background-color: #666666; }
.loader-wave .rect2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.loader-wave .rect3 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.loader-wave .rect4 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.loader-wave .rect5 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
@-webkit-keyframes sk-stretchdelay {
    0%, 20%, 60%, 80%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

/* Loader dots */
.loader-dots {
  --dot: 0.25rem;
  --gap: 0.125rem;
  display: inline-block;
  position: relative;
  width: var(--dot);
  height: var(--dot);
  background-color: var(--color-gray-400);    /* middle dot */
  border-radius: 50%;
  animation: dotFade 1.2s infinite ease-in-out;
  animation-delay: calc((1/3) * 1.2s);         /* middle dot delay */
}
.loader-dots::before,
.loader-dots::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--dot);
  height: var(--dot);
  background-color: var(--color-gray-400);
  border-radius: 50%;
  animation: dotFade 1.2s infinite ease-in-out;
}
.loader-dots::before {
  left: calc(-1 * (var(--dot) + var(--gap)));
  animation-delay: 0s;                         /* first dot */
}
.loader-dots::after {
  left: calc(var(--dot) + var(--gap));
  animation-delay: calc((2/3) * 1.2s);          /* last dot */
}

@keyframes dotFade {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.2; }
}



/***************
*** SPINNERS ***
****************/
/* <svg class="spinner-rod" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"></circle></svg> */
.spinner-rod {
    fill: transparent;
    stroke: currentColor;
	animation: rotate 1s linear infinite;
}
.spinner-rod > * {
	stroke-width: 3;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
	100% {transform: rotate(360deg);}
}
@keyframes dash {
	0% {stroke-dasharray: 1, 150;stroke-dashoffset: 0;}
	50% {stroke-dasharray: 90, 150;stroke-dashoffset: -35;}
	100% {stroke-dasharray: 90, 150;stroke-dashoffset: -124;}
}