.loader-div {
  display: none;
}
.loader-div-delete {
  display: none;
}
.pure_loader {
  position: absolute;
  content: '';
  top: calc(50% - 3.5rem);
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  border: 5px solid lightBlue;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0rem 0rem 0.6rem rgba(0, 0, 0, 0.3);
  animation: loader-spin 1s linear infinite;
  -webkit-animation: loader-spin 1s linear infinite;
  z-index: 1000;
}

.loader-success {
  background: lightGreen;
  border-color: lightGreen;
}

.loader-fail {
  background: #ffcccb;
  border-color: #ffcccb;
}

.pure_loader-text {
  position: absolute;
  content: '';
  top: calc(50% + 0.5rem);
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.pure_loader.loader-success::before {
  height: 7px;
  width: 1.6rem;
  position: absolute;
  top: 65%;
  left: 40%;
  background-color: green;
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
  border-radius: 5px;
  animation: baseGrow 1s;
  content: '';
}

.pure_loader.loader-success::after {
  height: 7px;
  width: 1.0rem;
  position: absolute;
  top: 65%;
  left: 47%;
  background-color: green;
  transform: rotate(-135deg);
  transform-origin: 0% 50%;
  border-radius: 5px;
  animation: tipGrow 1s;
  content: '';
}

.pure_loader.loader-fail::before {
  width: 2rem;
  height: 0.5rem;
  background: darkRed;
  transform-origin: 50% 50%;
  top: calc(50% - 0.1rem);
  left: calc(50% - 1rem);
  transform: rotate(45deg);
  position: absolute;
  content: '';
  border-radius: 10px;
  animation: leftIn 0.3s linear;
  content: '';
}

.pure_loader.loader-fail::after {
  width: 2rem;
  height: 0.5rem;
  background: darkRed;
  transform-origin: 50% 50%;
  top: calc(50% - 0.1rem);
  right: calc(50% - 1rem);
  transform: rotate(-45deg);
  position: absolute;
  content: '';
  border-radius: 10px;
  animation: rightIn 0.3s linear;
  content: '';
}

.pure_loader.loader-success, .pure_loader.loader-fail {
  animation: pop 1.2s ease-in-out;
}

/* update modal */
.loader-div-update {
  display: none;
}
.pure_loader-update {
  position: absolute;
  content: '';
  top: calc(50% - 3.5rem);
  left: calc(50% - 1.5rem);
  width: 3rem;
  height: 3rem;
  border: 5px solid lightBlue;
  border-radius: 50%;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0rem 0rem 0.6rem rgba(0, 0, 0, 0.3);
  animation: loader-spin 1s linear infinite;
  -webkit-animation: loader-spin 1s linear infinite;
  z-index: 1000;
}


.pure_loader-text-update {
  position: absolute;
  content: '';
  top: calc(50% + 0.5rem);
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.pure_loader-update .loader-success::before {
  height: 7px;
  width: 1.6rem;
  position: absolute;
  top: 65%;
  left: 40%;
  background-color: green;
  transform: rotate(-45deg);
  transform-origin: 0% 50%;
  border-radius: 5px;
  animation: baseGrow 1s;
  content: '';
}

.pure_loader-update .loader-success::after {
  height: 7px;
  width: 1.0rem;
  position: absolute;
  top: 65%;
  left: 47%;
  background-color: green;
  transform: rotate(-135deg);
  transform-origin: 0% 50%;
  border-radius: 5px;
  animation: tipGrow 1s;
  content: '';
}

.pure_loader-update .loader-fail::before {
  width: 2rem;
  height: 0.5rem;
  background: darkRed;
  transform-origin: 50% 50%;
  top: calc(50% - 0.1rem);
  left: calc(50% - 1rem);
  transform: rotate(45deg);
  position: absolute;
  content: '';
  border-radius: 10px;
  animation: leftIn 0.3s linear;
  content: '';
}

.pure_loader-update .loader-fail::after {
  width: 2rem;
  height: 0.5rem;
  background: darkRed;
  transform-origin: 50% 50%;
  top: calc(50% - 0.1rem);
  right: calc(50% - 1rem);
  transform: rotate(-45deg);
  position: absolute;
  content: '';
  border-radius: 10px;
  animation: rightIn 0.3s linear;
  content: '';
}

.pure_loader-update .loader-success, .pure_loader-update .loader-fail {
  animation: pop 1.2s ease-in-out;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
    border-top: 5px solid blue;
  }
  100% {
    transform: rotate(360deg);
    border-top: 5px solid blue;

  }
}

@keyframes tipGrow {
  0% {
    width: 0px;
    left: 0;
    top: 0;
  }
  25% {
    width: 0px;
    left: 0;
    top: 0; 
  }
  50% {
    top: 0%;
    left: 0%;
    width: 0;
  }
  75% {
    top: 0%;
    left: 0%;
    width: 0rem;
  }
  100% {
    top: 65%;
    left: 50%;
    width: 1rem;
  }
}

@keyframes baseGrow {
  0% {

    width: 0;
  }
  90% {
    width: 0;
  }
  100% {

    width: 1.6rem;
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);    
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes leftIn {
  0% {
    left: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.1rem);
    left: calc(50% - 1rem);
    width: 2rem;
  }
}

@keyframes rightIn {
  0% {
    rigth: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.1rem);
    right: calc(50% - 1rem);
    width: 2rem;
  }
}
@-webkit-keyframes loader-spin {
  0% {
    transform: rotate(0deg);
    border-top: 5px solid blue;
  }
  100% {
    transform: rotate(360deg);
    border-top: 5px solid blue;

  }
}

@-webkit-keyframes tipGrow {
  0% {
    width: 0px;
    left: 0;
    top: 0;
  }
  25% {
    width: 0px;
    left: 0;
    top: 0; 
  }
  50% {
    top: 0%;
    left: 0%;
    width: 0;
  }
  75% {
    top: 0%;
    left: 0%;
    width: 0rem;
  }
  100% {
    top: 65%;
    left: 50%;
    width: 1rem;
  }
}

@-webkit-keyframes baseGrow {
  0% {

    width: 0;
  }
  90% {
    width: 0;
  }
  100% {

    width: 1.6rem;
  }
}

@-webkit-keyframes pop {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);    
  }
  100% {
    transform: scale(1.1);
  }
}

@-webkit-keyframes leftIn {
  0% {
    left: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.1rem);
    left: calc(50% - 1rem);
    width: 2rem;
  }
}

@-webkit-keyframes rightIn {
  0% {
    rigth: 0;
    top: 0;
    width: 0;
  }
  100% {
    top: calc(50% - 0.1rem);
    right: calc(50% - 1rem);
    width: 2rem;
  }
}