@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); 
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
  }
}

.ball-clip-rotate > div {
  background-color: var(--main-color);
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 2px solid var(--main-color);
  border-bottom-color: transparent;

  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite; 
}

.ball-clip-rotate-white > div {
  background-color: white;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 2px solid white;
  border-bottom-color: transparent;

  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite; 
}

.loader-s26 {
  height: 26px;
  width: 26px;
}

.loader-s13 {
  height: 18px;
  width: 18px;
}

.inline-block {
  display: inline-block;
}