body {
    font-family: Arial, sans-serif;
}
.form-container {
    background-color: #fff;
    padding: 20px;
   
    border-radius: 8px;
   
  animation-name: fadeIn ;
    animation-duration : 0.5s;
}

.form-container1 {
    background-color: #transparent;
    padding: 20px;
   height: 300px;
    border-radius: 8px;
    
  

animation-name: fadeOut;
animation-delay: 4s;  
animation-duration : 1s;
}
@keyframes fadeOut {
    to { opacity: 0 }
}


.step {
display:none;
animation-name: fadeIn ;
animation-duration : 0.5s;
}
.step.active {
            display: block;
        }
@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

.step.active {
    display: block;
}

#progressBarContainer {
    width: 100%;
    background-color: #f3f3f3;
    margin-top: 20px;
}

#progressBar {
    width: 0;
    height: 10px;
    background-color: #1E9E6B;
}

button {
    margin: 10px;
    padding: 10px;
    background-color: #1E9E6B;
    color: white;
    border: none;
    cursor: pointer;
}

button:disabled {
    background-color: #ccc;
}

button.prev {
    background-color:rgba(30, 158, 107,0.7);
}
.error{
  display: none;  
}
.select-invalid {
  background-color: #f8d7da;  /* Couleur de fond rouge pâle */
  border-color: #f5c6cb;      /* Bordure rouge pâle */
}
/* HTML: <div class="loader"></div> */
.loader {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#1d9436 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  animation: l7 1s infinite linear alternate;
}
@keyframes l7 {
  0%  {background-size: 20% 50% ,20% 50% ,20% 50% }
  20% {background-size: 20% 20% ,20% 50% ,20% 50% }
  40% {background-size: 20% 100%,20% 20% ,20% 50% }
  60% {background-size: 20% 50% ,20% 100%,20% 20% }
  80% {background-size: 20% 50% ,20% 50% ,20% 100%}
  100%{background-size: 20% 50% ,20% 50% ,20% 50% }
}