.stencil {
  background-size: 800px 1px;
  animation: loading 2s linear infinite;
  display: flex;
}
.primary {
  background-image: -webkit-linear-gradient(
    left,
    #f6f8fb 0,
    #ebf0f5 33.33%,
    #f6f8fb 66.66%,
    #f6f8fb 100%
  );
}
.secondary {
  background-image: -webkit-linear-gradient(
    left,
    #383f57 0,
    #475173 33.33%,
    #383f57 66.66%,
    #383f57 100%
  );
}
.line-sm {
  height: 5px;
}
.line-md {
  height: 7px;
}
.line-lg {
  height: 9px;
}
.line-xlg {
  height: 10px;
}
.line {
  width: 100%;
}
.rounded-corner,
.rounded-corner.line-sm,
.rounded-corner.line-md,
.rounded-corner.line-ld,
.rounded-corner.line-xlg {
  border-radius: 4px;
}
.circle {
  border-radius: 50px;
}
.sm {
  width: 22px;
  height: 22px;
}
.md {
  width: 30px;
  height: 30px;
}
.lg {
  width: 40px;
  height: 40px;
}

@keyframes loading {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}
