section.qa-form{ 
  padding-top:20px 0px 20px 0px;
  background-color:rgb(231, 231, 231);
}
#qa-form{
  background-color:gray;
  padding:10px;
  box-sizing:border-box;
  max-width:1200px;
  margin:auto;
}

#qa-form h4{
  color:white;
  text-align:center;
  font-size:2rem;
  margin-bottom:20px;
}


.options{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content: center;
  font-size:1.2rem;

}

.options span{
  background-color:#b9b0a0;
  cursor:pointer;
  border-radius:5px;
  transition:background-color 0.2s ease-in;
}



span.enabled{
  background-color:green;
  color:white;
}

button#form-next{ 
  padding:8px;
  border:none;
  color:white;
  border-radius:5px;
}

.name{
  width:100%;
  display:inline-flex;
  gap:5px;
}



#qa-form input{
  padding:5px;
  border-radius:2px;
  border:none;
}

#qa-form input:focus, textarea:focus{
  outline-offset:1px;
  outline:2px solid yellow;
}

.name input{
  width:50%;
}

.qa-form-inner input{
  margin-top:10px;
  margin-bottom:10px;
  width:100%;
}

.qa-form-inner textarea{
  width:100%;
  height:150px;
  resize:none;
  padding:10px;
  font-family:ui-sans-serif;
  border-radius:5px;
}

.qa-form-inner input[type="submit"]{
  width:fit-content;
  margin-left:45%;
  padding:7px;
    background-color:#5b5bb9;
  border-radius:2px;
  color:white;
  border:none;
}

.error-message-form{
  display:none;
  position:fixed;
  bottom:10px;
  border-radius:5px;
  padding:5px;
  color:white;
  right:20px;
  background-color:red;
}


.decorative{
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
}


#form-next{
  width:fit-content;
  background-color:#5b5bb9;
  cursor:pointer;
}

span.loader{
  display:none;
  width:25px;
  height:25px;
  border:2px solid white;
  border-top:2px solid blue;
  border-radius:50%;
  animation:loader 1s linear infinite;
}

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

div.progress{
  width:100%;
  height:10px;
  background-color:black;
  margin-bottom:10px;
   
}

div.bar{
  width:35%;
  height:100%;
  background-color:orange;
  transition:width 0.5s ease-in;
}



.bar.moveRight{
  width: 75%;
}

.success{
  display:none;
  color:white;
  text-align:center;
}

.success p{
  font-size:20px;
}
.success img{
  width:200px;
  height:150px;
  
}