/* Gray tones */
/* Alert colors */
[class*="loader-"] {
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  pointer-events: none; }

.loader-element:before,
.loader-element:after,
.loader-element {
  border-radius: 50%;
  animation-fill-mode: both;
  animation: loader-animation 1.8s infinite ease-in-out; }

.loader-element {
  color: currentcolor;
  position: relative;
  transform: translateZ(0);
  animation-delay: -0.16s;
  top: -1em; }
  .loader-element:before {
    right: 100%;
    animation-delay: -0.32s; }
  .loader-element:after {
    left: 100%; }
  .loader-element:before, .loader-element:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: inherit;
    height: inherit; }

@keyframes loader-animation {
  0%,
  80%,
  100% {
    box-shadow: 0 1em 0 -1em; }
  40% {
    box-shadow: 0 1em 0 -0.2em; } }

.loader-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px; }

.loader-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #d3d3d3;
  border-color: #d3d3d3 transparent #d3d3d3 transparent;
  animation: loader-dual-ring 1.2s linear infinite; }

@keyframes loader-dual-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px; }

.loader-ripple:after {
  content: " ";
  position: absolute;
  border: 4px solid #d3d3d3;
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

@keyframes loader-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1; }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0; } }