@import url(assets/index-R9CGkYtK.css);

@property --opacity {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
  }

.throbber-wrapper {
    align-items: center;
    flex-direction: column;
    height: 115px;
    min-height: 0;
    justify-content: center;
    position: relative;
    aspect-ratio:1/1;
    display: none;
    margin: auto;
    margin-top: calc(50% - 57.5px);
  }
   
  .throbber {
    animation: rotate 2s linear infinite;
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center center;
    width: 100%;
    opacity: var(--opacity);
  }
    .throbber--circle {
      animation: dash1 1.5s ease-in-out infinite;
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      stroke: rgb(57 196 182 / 0.7);
    }

    .visibleCheckmark .throbber {
        opacity: 0;
    }

    .visibleCheckmark .form-success {
        color: rgb(57 196 182 / 0.9) !important;
    }
  
   
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
   
  @keyframes dash1 {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
   
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
   
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }


  /**/

  svg:has(path:where(.checkmark)) {
    width: 101px;
  }
  .checkmark {
    stroke: rgb(57 196 182 / 0.7);
    stroke-dashoffset: 745.74853515625;
    stroke-dasharray: 745.74853515625;
    opacity: 0;
    transition: opacity 100ms ease;
    margin: auto;
  }

  .visibleCheckmark .checkmark {
    animation: dash2 2s ease-out forwards;
    opacity: 1;
  }
  
  @keyframes dash2 {
    0% {
      stroke-dashoffset: 745.74853515625;
      --opacity:0;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  /**/

  .form-success {
    display: none;
    opacity: 1;
    color: #ff000067 !important;
    text-align: center !important; 
  }


  /**/

  .checkmark_circle_error {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 5px;
    stroke-miterlimit: 10;
    stroke: #ff4444;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  
  .checkmark1 {
    height: 483px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: block;
    stroke-width: 5px;
    stroke: white;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #ff4444;
    margin-bottom: 20px;
    transition:stroke 200ms ease-out;
    opacity: 0;
  }

  

  .errorSvg .checkmark1 {
    opacity: 0;
    transition: all 500ms ease;
    animation: fillerror .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }

  .errorSvg .throbber {
    opacity: 0;
  }
  
  @keyframes scale {
    0% {
      transform: none;
      opacity: 0;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }

    100% {
        transform: none;
        opacity: 1;
    }
  }
  
  @keyframes fillerror {
    100% {
      box-shadow: inset 0px 0px 0px calc(150px / 2) #ff4444;
    }
  }

  /**/

@view-transition {
  navigation: auto;
}

@keyframes move-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.8s cubic-bezier(0.6, 0.04, 0.98, 0.34) both move-out;
}

::view-transition-new(root) {
  animation: 0.8s cubic-bezier(0.08, 0.82, 0.17, 1) both move-in;
}