.validerOperation, .erreurOperation, .warningOperation , .chargerOperation{
  z-index: 1200;
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
  pointer-events: none;
  background-color: #000000b0;
  color: white !important;
}

.validerOperation .blobValider, .erreurOperation .blobErreur, .warningOperation .blobWarn, .chargerOperation .blobCharger {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.validerOperation .animValider, .erreurOperation .animErreur, .warningOperation .animWarn, .chargerOperation .animCharger{
  -webkit-animation: animOperation 0.5s ease;
  -moz-animation: animOperation 0.5s ease;
  -o-animation: animOperation 0.5s ease;
  animation: animOperation 0.5s ease;
  border-radius: 100%;
}


.validerOperation .animValider > .animCheckValiderLineTip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
  -webkit-animation: animCheckValiderLineTip 0.5s 0s ease;
  -moz-animation: animCheckValiderLineTip 0.5s 0s ease;
  -o-animation: animCheckValiderLineTip 0.5s 0s ease;
  animation: animCheckValiderLineTip 0.5s 0s ease;
}


.erreurOperation .animErreur > .animCheckErreurLineTip {
  top: 38px;
  right: 16px;
  width: 47px;
  transform: rotate(45deg);
  -webkit-animation: animCheckErreurLineTip 0.5s 0s ease;
  -moz-animation: animCheckErreurLineTip 0.5s 0s ease;
  -o-animation: animCheckErreurLineTip 0.5s 0s ease;
  animation: animCheckErreurLineTip 0.5s 0s ease;
}

.validerOperation .animValider > .animCheckValiderLine, .erreurOperation .animErreur > .animCheckErreurLine, .warningOperation .animWarn > .animCheckWarnLine {
  height: 5px;
  background-color: white;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}


.validerOperation .animValider > .animCheckValiderLineLong {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
  -webkit-animation: animCheckValiderLineLong 0.5s 0s ease;
  -moz-animation: animCheckValiderLineLong 0.5s 0s ease;
  -o-animation: animCheckValiderLineLong 0.5s 0s ease;
  animation: animCheckValiderLineLong 0.5s 0s ease;
}


.erreurOperation .animErreur > .animCheckErreurLineLong {
  top: 38px;
  right: 16px;
  width: 47px;
  transform: rotate(-45deg);
  -webkit-animation: animCheckErreurLineLong 0.7s 0s ease;
  -moz-animation: animCheckErreurLineLong 0.7s 0s ease;
  -o-animation: animCheckErreurLineLong 0.7s 0s ease;
  animation: animCheckErreurLineLong 0.7s 0s ease;
}


.warningOperation .animWarn > .animCheckWarnLineVertical {
height:47px;
left:50%;
margin-left:-2px;
position:absolute;
top:10px;
width:5px;
z-index:12
}

.warningOperation .animWarn > .animCheckWarnLineDot {
border-radius:50%;
bottom:10px;
height:7px;
left:50%;
margin-left:-3px;
position:absolute;
width:7px;
z-index:12
}

.animWarn{-webkit-animation:scaleWarning .75s infinite alternate;animation:scaleWarning .75s infinite alternate}
.pulseWarningIns{-webkit-animation:pulseWarningIns .75s infinite alternate;animation:pulseWarningIns .75s infinite alternate}
/* ANIMATE WARNING */
@-webkit-keyframes scaleWarning{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes scaleWarning{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes pulseWarning{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#F8BB86;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@keyframes pulseWarning{0%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}30%{background-color:#fff;-webkit-transform:scale(1);transform:scale(1);opacity:.5}100%{background-color:#F8BB86;-webkit-transform:scale(2);transform:scale(2);opacity:0}}
@-webkit-keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}
@keyframes pulseWarningIns{0%{background-color:#F8D486}100%{background-color:#F8BB86}}

#html-spinner{
    width: 100%;
    height: 100%;
    border: 4px solid var(--secondary-color);
    border-top: 4px solid white;
    border-radius: 50%;
    display: block;
    position: absolute;
    z-index: 10;
    top: 0px;
    right: 0px;
}

#html-spinner{
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1.2s;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  
  -moz-transition-property: -moz-transform;
  -moz-animation-name: rotate; 
  -moz-animation-duration: 1.2s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  
  transition-property: transform;
  animation-name: rotate; 
  animation-duration: 1.2s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}


@keyframes animOperation {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  90% { border-radius: 50%; }
}

@keyframes animCheckValiderLineTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animCheckValiderLineLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@keyframes animCheckErreurLineTip {
  0% {
    top: 0;
    right: 0;
    width: 0px;
  }
  54% {
    top: 0;
    right: 0;
    width: 0px;
  }
  70% {
    top: 28px;
    right: 18px;
    width: 20px;
  }
  84% {
    top: 38px;
    right: 13px;
    width: 52px;
  }
  100% {
    top: 38px;
    right: 16px;
    width: 47px;
  }
}
@keyframes animCheckErreurLineLong {
  0% {
    top: 0;
    left: 0;
    width: 0px;
  }
  54% {
    top: 0;
    left: 0;
    width: 0px;
  }
  70% {
    top: 28px;
    left: 18px;
    width: 20px;
  }
  84% {
    top: 38px;
    right: 13px;
    width: 52px;
  }
  100% {
    top: 38px;
    right: 16px;
    width: 47px;
  }
}