/* HTML: <div class="loader"></div> */
.tloader,
.tloader:before,
.tloader:after{
  width: 35px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 3px inset #006837;
  position: relative;
  animation: 1.5s infinite 0.5s;
  animation-name: l7-1,l7-2;
}
.tloader:before,
.tloader:after{
  content: "";
  position: absolute;
  left: calc(100% + 5px);
  animation-delay: 1s,0s;
}
.tloader:after{
  left: -40px;
  animation-delay: 0s,1s;
}
@keyframes l7-1 {
  0%,55%,100%  {border-top-left-radius:0;  border-bottom-right-radius:0}
  20%,30%      {border-top-left-radius:50%;border-bottom-right-radius:50%}
}
@keyframes l7-2 {
  0%,55%,100%  {border-bottom-left-radius:0;  border-top-right-radius:0}
  20%,30%      {border-bottom-left-radius:50%;border-top-right-radius:50%}
}

.rtcd-loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,var(--main-primary-color-darken) 90%,#0000);
  background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
  margin-left:auto;
  margin-right:auto;
}
@keyframes l3 {
  20%{background-position:0%   0%, 50%  50%,100%  50%}
  40%{background-position:0% 100%, 50%   0%,100%  50%}
  60%{background-position:0%  50%, 50% 100%,100%   0%}
  80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.rtcd-loader-white {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,white 90%,#0000);
  background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
  margin-left:auto;
  margin-right:auto;
}
@keyframes l3 {
  20%{background-position:0%   0%, 50%  50%,100%  50%}
  40%{background-position:0% 100%, 50%   0%,100%  50%}
  60%{background-position:0%  50%, 50% 100%,100%   0%}
  80%{background-position:0%  50%, 50%  50%,100% 100%}
}