/*Loader CSS */
:is(
   .loader-wrapper, 
   .loader-wrapperSend
) {
   position: fixed;
   z-index: 9999;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
}

.loader-wrapper {
   background: var(--blanco);
}

.loader-wrapperSend {
   background: var(--blanco);
}

.loader-circle {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 150px;
   height: 150px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   border: 5px solid var(--blanco);
   box-shadow: 0 0 0 5px var(--azulSuave);
   overflow: hidden;
}

.loader-wave {
   position: relative;
   width: 100%;
   height: 100%;
   background: var(--azulSuave);
   border-radius: 50%;
   box-shadow: inset 0 0 50px var(--bodyColor);
}

.loader-wave:before,
.loader-wave:after {
   content: "";
   position: absolute;
   width: 200%;
   height: 200%;
   top: 0%;
   left: 50%;
   transform: translate(-50%, -75%);
}

.loader-wave:before {
   border-radius: 45%;
   background: var(--bodyColor);
   animation: animate 5s linear infinite;
   -webkit-animation: animate 5s linear infinite;
   -ms-animation: animate 5s linear infinite;
   -moz-animation: animate 5s linear infinite;
}

.loader-wave:after {
   border-radius: 40%;
   background: var(--bodyColor);
   animation: animate 10s linear infinite;
   -webkit-animation: animate 10s linear infinite;
   -ms-animation: animate 10s linear infinite;
   -moz-animation: animate 10s linear infinite;
}

@keyframes animate {
   0% {
      transform: translate(-50%, -75%) rotate(0deg);
   }
   100% {
      transform: translate(-50%, -75%) rotate(360deg);
   }
}

@-webkit-keyframes animate {
   0% {
      transform: translate(-50%, -75%) rotate(0deg);
   }
   100% {
      transform: translate(-50%, -75%) rotate(360deg);
   }
}