/*  css-loading-spinners.css
  Copyright (c) Ian A. Cook
  MIT License
  https://github.com/nai888/css-loading-spinners
*/

:root {
    --cls-color: #558B6E;
    --cls-sec-color: #EEEEEE;
    --cls-size: 5rem;
    --cls-margin: 1rem;
    --cls-speed: 2s;
  }
  
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    } 100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    } 100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes flip-flop {
    0%, 100% {
      -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
    } 50% {
      -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
    }
  }
  
  @keyframes flip-flop {
    0%, 100% {
      -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
              transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
    } 50% {
      -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
              transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
    }
  }
  
  @-webkit-keyframes signal {
    0% {
      -webkit-transform: scale(0);
      -webkit-opacity: 0;
    } 50% {
      -webkit-opacity: 1;
    } 100% {
      -webkit-transform: scale(1);
      -webkit-opacity: 0;
    }
  }
  
  @keyframes signal {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      -webkit-opacity: 0;
              opacity: 0;
    } 50% {
      -webkit-opacity: 1;
              opacity: 1;
    } 100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-opacity: 0;
              opacity: 0;
    }
  }
  
  @-webkit-keyframes grow-shrink {
    0%, 100% {
      -webkit-transform: scale(0);
    } 50% {
      -webkit-transform: scale(1);
    }
  }
  
  @keyframes grow-shrink {
    0%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    } 50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  
  [class^="cls-"] {
    box-sizing: border-box;
  }
  
  .cls-spinner {
    display: block;
    position: relative;
    width: var(--cls-size);
    height: var(--cls-size);
    margin: var(--cls-margin);
  }
  
  .cls-flip-flop {
    -webkit-animation: flip-flop calc(var(--cls-speed) / 2) ease infinite;
            animation: flip-flop calc(var(--cls-speed) / 2) ease infinite;
  }
  
  .cls-spin {
    -webkit-animation: spin var(--cls-speed) linear infinite;
            animation: spin var(--cls-speed) linear infinite;
  }
  
  .cls-circle {
    border-width: calc(var(--cls-size) / 5 * 0.75);
    border-style: solid;
    border-color: var(--cls-sec-color);
    border-top-color: var(--cls-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }
  
  .cls-dual-circle {
    border-width: calc(var(--cls-size) / 5 * 0.75);
    border-style: solid;
    border-color: var(--cls-color) transparent;
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }
  
  .cls-bowtie, .cls-bowtie-v {
    border-width: calc(var(--cls-size) / 2);
    border-style: solid;
    border-color: transparent var(--cls-color);
    border-radius: 50%;
  }
  
  .cls-bowtie-v {
    border-color: var(--cls-color) transparent;
  }
  
  .cls-square {
    width: 100%;
    height: 100%;
    background-color: var(--cls-color);
  }
  
  .cls-signal, .cls-triple-signal, .cls-triple-signal::before, .cls-triple-signal::after {
    border-width: calc(var(--cls-size) / 25);
    border-style: solid;
    border-color: var(--cls-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
  }
  
  .cls-triple-signal::before, .cls-triple-signal::after, .cls-rings::before, .cls-rings::after {
    content: '';
    top: 50%;
    left: 50%;
    margin: calc(var(--cls-size) / -2) 0 0 calc(var(--cls-size) / -2);
  }
  
  .cls-signal, .cls-triple-signal, .cls-triple-signal::before, .cls-triple-signal::after {
    -webkit-animation: signal calc(var(--cls-speed) / 2) ease-out infinite;
            animation: signal calc(var(--cls-speed) / 2) ease-out infinite;
  }
  
  .cls-triple-signal::before {
    -webkit-animation-delay: calc(var(--cls-speed) / 20);
            animation-delay: calc(var(--cls-speed) / 20);
  }
  
  .cls-triple-signal::after {
    -webkit-animation-delay: calc(var(--cls-speed) * 3 / 20);
            animation-delay: calc(var(--cls-speed) * 3 / 20);
  }
  
  .cls-ring, .cls-rings, .cls-rings::before, .cls-rings::after {
    border-width: calc(var(--cls-size) / 25);
    border-style: solid;
    border-color: var(--cls-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }
  
  .cls-rings, .cls-rings::before, .cls-rings::after {
    position: absolute;
  }
  
  .cls-ring, .cls-rings, .cls-rings::before, .cls-rings::after {
    -webkit-animation: grow-shrink var(--cls-speed) ease-in-out infinite;
            animation: grow-shrink var(--cls-speed) ease-in-out infinite;
  }
  
  .cls-rings::before {
    -webkit-animation-delay: calc(var(--cls-speed) / -4);
            animation-delay: calc(var(--cls-speed) / -4);
  }
  
  .cls-rings::after {
    -webkit-animation-delay: calc(var(--cls-speed) / 4);
            animation-delay: calc(var(--cls-speed) / 4);
  }