/* support for @(.*-)keyframe is not present in dotLess 1.3.0.5.
If they upgrade, we can move this into a .less file,
otherwise we just need to bundle this CSS properly in release mode.
*/


/* Main loading bar */

/* Safari */
@-webkit-keyframes animate-stripes {
    from { background-position: 0 0; }
    to   { background-position: 22px 0; }
}

/* Chrome, IE */
@keyframes animate-stripes {
    from { background-position: 0 0; }
    to   { background-position: 22px 0; }
}

/* Firefox; different value due to gradient quirks- must come last. */
@-moz-keyframes animate-stripes {
    from { background-position: 0 0; }
    to   { background-position: 31px 0; }
}


/* Throbber*/

@-webkit-keyframes throbber-rotate {
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}
@-moz-keyframes throbber-rotate {
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}
@keyframes throbber-rotate {
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}

@-webkit-keyframes throbber-opacity {
     00.0% { opacity: 0.05; }
     12.0% { opacity: 0.60; }
     19.5% { opacity: 0.68; }
     37.2% { opacity: 0.24; }
     40.5% { opacity: 0.52; }
     52.7% { opacity: 0.69; }
     60.2% { opacity: 0.05; }
     66.6% { opacity: 0.52; }
     70.0% { opacity: 0.63; }
     79.9% { opacity: 0.20; }
     84.2% { opacity: 0.35; }
     91.0% { opacity: 0.55; }
    100.0% { opacity: 0.50; }
}

/* Jiggle fields on updates or errors */

@-webkit-keyframes jiggle-field {
  0% {
    transform: rotate(-2deg);
  }
  33% {
    transform: rotate(2deg);
  }
  66% {
    transform: rotate(-2deg);
  }
}

@-moz-keyframes jiggle-field {
  0% {
    transform: rotate(-2deg);
  }
  33% {
    transform: rotate(2deg);
  }
  66% {
    transform: rotate(-2deg);
  }
}

@keyframes jiggle-field {
  0% {
    transform: rotate(-2deg);
  }
  33% {
    transform: rotate(2deg);
  }
  66% {
    transform: rotate(-2deg);
  }
}

/* Jiggle data/info on updates or errors */

@keyframes jiggle {
  0% {
    transform: rotate(-4deg);
  }
  33% {
    transform: rotate(4deg);
  }
  66% {
    transform: rotate(-4deg);
  }
}

@keyframes jiggle {
  0% {
    transform: rotate(-4deg);
  }
  33% {
    transform: rotate(4deg);
  }
  66% {
    transform: rotate(-4deg);
  }
}

@keyframes jiggle {
  0% {
    transform: rotate(-4deg);
  }
  33% {
    transform: rotate(4deg);
  }
  66% {
    transform: rotate(-4deg);
  }
}


/* Shake element on error (error messages) */ 

@-webkit-keyframes error-shake {
  0%   { -webkit-transform: translate(1px, 0);}
  10%  { -webkit-transform: translate(-1px, -1px) rotate(-1deg);}
  10%  { -webkit-transform: translate(-2px, 0);}
  30%  { -webkit-transform: translate(0px, 0);}
  40%  { -webkit-transform: translate(1px, 1px) rotate(1deg);}
  50%  { -webkit-transform: translate(-1px, 0) }
  60%  { -webkit-transform: translate(-2px, 0);}
  70%  { -webkit-transform: translate(1px, 0) rotate(-1deg);}
  80%  { -webkit-transform: translate(-1px, 0);}
  90%  { -webkit-transform: translate(1px, 0);}
  100% { -webkit-transform: translate(1px, 0) rotate(0deg);}
}
@-moz-keyframes error-shake {
  0%   { -moz-transform: translate(1px, 0);}
  10%  { -moz-transform: translate(-1px, -1px) rotate(-1deg);}
  10%  { -moz-transform: translate(-2px, 0);}
  30%  { -moz-transform: translate(0px, 0);}
  40%  { -moz-transform: translate(1px, 1px) rotate(1deg);}
  50%  { -moz-transform: translate(-1px, 0) }
  60%  { -moz-transform: translate(-2px, 0);}
  70%  { -moz-transform: translate(1px, 0) rotate(-1deg);}
  80%  { -moz-transform: translate(-1px, 0);}
  90%  { -moz-transform: translate(1px, 0);}
  100% { -moz-transform: translate(1px, 0) rotate(0deg);}
}
@-o-keyframes error-shake {
  0%   { -o-transform: translate(1px, 0);}
  10%  { -o-transform: translate(-1px, -1px) rotate(-1deg);}
  10%  { -o-transform: translate(-2px, 0);}
  30%  { -o-transform: translate(0px, 0);}
  40%  { -o-transform: translate(1px, 1px) rotate(1deg);}
  50%  { -o-transform: translate(-1px, 0) }
  60%  { -o-transform: translate(-2px, 0);}
  70%  { -o-transform: translate(1px, 0) rotate(-1deg);}
  80%  { -o-transform: translate(-1px, 0);}
  90%  { -o-transform: translate(1px, 0);}
  100% { -o-transform: translate(1px, 0) rotate(0deg);}
}
@keyframes error-shake {
  0%   { transform: translate(1px, 0);}
  10%  { transform: translate(-1px, -1px) rotate(-1deg);}
  10%  { transform: translate(-2px, 0);}
  30%  { transform: translate(0px, 0);}
  40%  { transform: translate(1px, 1px) rotate(1deg);}
  50%  { transform: translate(-1px, 0) }
  60%  { transform: translate(-2px, 0);}
  70%  { transform: translate(1px, 0) rotate(-1deg);}
  80%  { transform: translate(-1px, 0);}
  90%  { transform: translate(1px, 0);}
  100% { transform: translate(1px, 0) rotate(0deg);}
}  


/* Planned Cases kanban colum, fade in/out */

@keyframes fadeout {
  0%   {opacity: .5;}
  50%  {opacity: 0;}
  100% {opacity: 0; display: none;}
}

@keyframes fadein {
  0%   {opacity: 0; display: block;}
  50%  {opacity: .5;}
  100% {opacity: 1;}
}