/* HTML: <div class="loader"></div> */
.loader {
  width: 40px;
  aspect-ratio: 1;
  color: #f03355;
  background: conic-gradient(currentColor 0 270deg,#0000 0);
  border-radius: 50%;
  animation: l14-0 4s infinite linear;
}
.loader::before {
  content: "";
  display: block;
  height: 50%;
  width: 50%;
  border-top-left-radius: 100px;
  background: currentColor;
  animation: l14 0.5s infinite alternate;
}
@keyframes l14-0 {
    0%,24.99%  {transform: rotate(0deg)}
    25%,49.99% {transform: rotate(90deg)}
    50%,74.99% {transform: rotate(180deg)}
    75%,100%   {transform: rotate(270deg)}
}
@keyframes l14 {
    100%  {transform: translate(-10px,-10px)}
}
    .overlay {
display: none;
position: fixed;
top: 0;
left: 0;

width: 100%;
text-align: center;
height: 100%;
background-color: rgb(230 230 230 / 50%);
z-index: 1000;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
}

.valid-input {
cursor: not-allowed; 
}
#preloader .loader {
  width: 40px;
  height: 40px;
}