@keyframes fade-in{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slide-left{
  from{
    transform:translateX(120%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes slide-right{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(120%);
  }
}

@keyframes slide-down{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(120%);
  }
}

@keyframes slide-up{
  from{
    transform:translateY(120%);
  }
  to{
    transform:translateY(0);
  }
}

@keyframes show-up{
  from{
    bottom:0;
  }
  to{
    bottom:15px;
  }
}

@keyframes fade-out{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

@keyframes vanish{
  from{
    bottom:15px;
  }
  to{
    bottom:0;
  }
}

@keyframes linear-indeterminate{
  0%{
    transform:translateX(-100%);
  }
  60%{
    transform:translateX(105%);
  }
  100%{
    transform:translateX(105%);
  }
}

@keyframes circle-indeterminate{
  0%{
    stroke-dashoffset:400;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:400;
    transform:rotate(2.75turn);
  }
}

@keyframes circle-indeterminate-small{
  0%{
    stroke-dashoffset:200;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:200;
    transform:rotate(2.75turn);
  }
}

@keyframes shimmer{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(100%);
  }
}

.vtmn-progressbar_container{
  max-inline-size:100%;
  position:relative;
  color:hsl(200, 100%, 4.7%);
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-weight:400;
}

.vtmn-progressbar_container svg{
  display:block;
  inline-size:100%;
  block-size:0.5rem;
  border-radius:32px;
  background-color:hsl(210, 14.3%, 94.5%);
}

.vtmn-progressbar_label{
  -webkit-margin-after:0.5rem;
          margin-block-end:0.5rem;
  inline-size:100%;
}

.vtmn-progressbar_indicator{
  inline-size:100%;
  block-size:100%;
  stroke:hsl(200, 100%, 36.9%);
  stroke-width:0.5rem;
  stroke-linecap:round;
  transition:all 200ms;
}

.vtmn-progressbar_container:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_label{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.vtmn-progressbar_variant--linear .vtmn-progressbar_indicator{
  transform:unset;
}

.vtmn-progressbar_variant--circular.vtmn-progressbar_container{
  inline-size:8.5rem;
  block-size:8.5rem;
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_label{
  width:-moz-fit-content;
  width:fit-content;
  position:absolute;
  right:0;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:1.75rem;
  font-weight:700;
}

@media screen and (min-width: 1800px){
  .vtmn-progressbar_variant--circular .vtmn-progressbar_label{
  font-size:2rem;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
  .vtmn-progressbar_variant--circular .vtmn-progressbar_label{
  font-size:2rem;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px){
  .vtmn-progressbar_variant--circular .vtmn-progressbar_label{
  font-size:1.875rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px){
  .vtmn-progressbar_variant--circular .vtmn-progressbar_label{
  font-size:1.875rem;
  }
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_image{
  max-inline-size:7rem;
  inset-block-start:50%;
  inset-inline-start:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  block-size:auto;
  position:absolute;
}

.vtmn-progressbar_variant--circular svg{
  inline-size:100%;
  block-size:100%;
  background-color:transparent;
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_track{
  inline-size:8rem;
  block-size:8rem;
  stroke-width:0.5rem;
  fill:transparent;
  stroke:hsl(210, 14.3%, 94.5%);
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_indicator{
  inline-size:8rem;
  block-size:8rem;
  transform-origin:center;
  transform:rotate(-90deg);
  fill:transparent;
  stroke-dasharray:400;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular.vtmn-progressbar_container{
  inline-size:4.375rem;
  block-size:4.375rem;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_label{
  font-size:1.125rem;
  font-weight:400;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_track{
  inline-size:4rem;
  block-size:4rem;
  stroke-width:0.25rem;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_indicator{
  inline-size:4rem;
  block-size:4rem;
  stroke-width:0.25rem;
  stroke-dasharray:200;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  > .vtmn-progressbar_image{
  max-inline-size:3.5rem;
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular){
  font-size:0.875rem;
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_labels{
  -webkit-margin-after:0.25rem;
          margin-block-end:0.25rem;
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular) svg{
  block-size:0.25rem;
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_indicator{
  stroke-width:0.25rem;
}

.vtmn-progressbar_size--medium{
  font-size:1rem;
}

.vtmn-progressbar_size--medium .vtmn-progressbar_labels{
  -webkit-margin-after:0.5rem;
          margin-block-end:0.5rem;
}

.vtmn-progressbar_size--medium svg{
  block-size:0.5rem;
}

.vtmn-progressbar_size--medium .vtmn-progressbar_indicator{
  stroke-width:0.5rem;
}

.vtmn-progressbar_size--large{
  font-size:1rem;
}

.vtmn-progressbar_size--large .vtmn-progressbar_labels{
  -webkit-margin-after:0.5rem;
          margin-block-end:0.5rem;
}

.vtmn-progressbar_size--large svg{
  block-size:1rem;
}

.vtmn-progressbar_size--large .vtmn-progressbar_indicator{
  stroke-width:1rem;
}

.vtmn-progressbar--indeterminate .vtmn-progressbar_indicator{
  position:absolute;
  animation:1.5s ease-in-out infinite linear-indeterminate;
}

.vtmn-progressbar_variant--circular.vtmn-progressbar--indeterminate
  .vtmn-progressbar_indicator{
  position:absolute;
  animation:4s linear infinite circle-indeterminate;
}

.vtmn-progressbar_variant--circular.vtmn-progressbar_size--small.vtmn-progressbar--indeterminate
  .vtmn-progressbar_indicator{
  position:absolute;
  animation:4s linear infinite circle-indeterminate-small;
}