/*STATUS STYLES*/
.vueStatus {
  position: absolute;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: calc(100% - 1rem);
  display: flex;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  z-index: 1;
  /**Background blur*/
  backdrop-filter: blur(4px); }
  .vueStatus .background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-color: #FFFFFF;
    opacity: 0.4; }
  .vueStatus.centerWithPage {
    position: fixed;
    align-content: center;
    align-items: center;
    top: 0px;
    left: 0px;
    padding-top: 0rem; }
    .vueStatus.centerWithPage .background {
      position: fixed; }
  .vueStatus svg.loading {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #FFFFFF;
    box-shadow: inset 0px 0px 0px #58b91d; }
    .vueStatus svg.loading .loading_circle {
      fill: none;
      stroke: #1d82b9;
      stroke-width: 2;
      stroke-dasharray: 60;
      transform-origin: center;
      animation: strokeTo .5s linear infinite; }
  .vueStatus svg.checkmark {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #58b91d;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
    .vueStatus svg.checkmark .checkmark__circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-width: 2;
      stroke-miterlimit: 10;
      stroke: #58b91d;
      fill: none;
      animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
    .vueStatus svg.checkmark .checkmark__check {
      transform-origin: 50% 50%;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
  .vueStatus.speedSlowest svg.loading .loading_circle {
    animation: strokeTo 2s linear infinite; }
  .vueStatus.speedSlowest svg.checkmark .checkmark__circle {
    animation: stroke 2.4s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
  .vueStatus.speedSlowest svg.checkmark .checkmark {
    animation: fill 1.6s ease-in-out 1.6s forwards, scale 1.2s ease-in-out 3.6s both; }
  .vueStatus.speedSlowest svg.checkmark .checkmark__check {
    animation: stroke 1.2s cubic-bezier(0.65, 0, 0.45, 1) 3.2s forwards; }
  .vueStatus.speedSlow svg.loading .loading_circle {
    animation: strokeTo 1s linear infinite; }
  .vueStatus.speedSlow svg.checkmark .checkmark__circle {
    animation: stroke 1.2s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
  .vueStatus.speedSlow svg.checkmark .checkmark {
    animation: fill 0.8s ease-in-out 0.8s forwards, scale 0.6s ease-in-out 1.8s both; }
  .vueStatus.speedSlow svg.checkmark .checkmark__check {
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 1.6s forwards; }
  .vueStatus.speedFast svg.loading .loading_circle {
    animation: strokeTo 0.375s linear infinite; }
  .vueStatus.speedFast svg.checkmark .checkmark__circle {
    animation: stroke 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
  .vueStatus.speedFast svg.checkmark .checkmark {
    animation: fill 0.3s ease-in-out 0.3s forwards, scale 0.225s ease-in-out 0.675s both; }
  .vueStatus.speedFast svg.checkmark .checkmark__check {
    animation: stroke 0.225s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; }
  .vueStatus.speedFastest svg.loading .loading_circle {
    animation: strokeTo 0.25s linear infinite; }
  .vueStatus.speedFastest svg.checkmark .checkmark__circle {
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
  .vueStatus.speedFastest svg.checkmark .checkmark {
    animation: fill 0.2s ease-in-out 0.2s forwards, scale 0.15s ease-in-out 0.45s both; }
  .vueStatus.speedFastest svg.checkmark .checkmark__check {
    animation: stroke 0.15s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards; }
  .vueStatus.statusSmall svg.loading {
    width: 3rem;
    height: 3rem; }
  .vueStatus.statusSmall svg.checkmark {
    width: 3rem;
    height: 3rem; }
    .vueStatus.statusSmall svg.checkmark.speedSlowest svg.checkmark .checkmark {
      animation: fillSmall 1.6s ease-in-out 1.6s forwards, scale 1.2s ease-in-out 3.6s both; }
    .vueStatus.statusSmall svg.checkmark.speedSlow svg.checkmark .checkmark {
      animation: fillSmall 0.8s ease-in-out 0.8s forwards, scale 0.6s ease-in-out 1.8s both; }
    .vueStatus.statusSmall svg.checkmark.speedFast svg.checkmark .checkmark {
      animation: fillSmall 0.3s ease-in-out 0.3s forwards, scale 0.225s ease-in-out 0.675s both; }
    .vueStatus.statusSmall svg.checkmark.speedFastest svg.checkmark .checkmark {
      animation: fillSmall 0.2s ease-in-out 0.2s forwards, scale 0.15s ease-in-out 0.45s both; }

@keyframes stroke {
  100% {
    stroke-dashoffset: 0; } }

@keyframes strokeTo {
  to {
    transform: rotate(360deg); } }

@keyframes scale {
  0%, 100% {
    transform: none; }
  50% {
    transform: scale3d(1.2, 1.2, 1); } }

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 6rem #58b91d; } }

@keyframes fillSmall {
  100% {
    box-shadow: inset 0px 0px 0px 3rem #58b91d; } }