#qna {
  display: none;
  margin-bottom: 5rem;
}

.qBox {
  background-color: whitesmoke;
  /* color: rgb(244, 59, 0, 0.7); */
  color: rgba(0, 195, 98, 0.7);
  text-align: center;
  border-radius: 20px;
  font-size: 25px;
  font-weight: bolder;
  width: 80%;
  word-break: keep-all;
}

.answerList {
  background-color: whitesmoke;
  border-radius: 20px;
  display: block;
  border: 0px;
  font-size: 18px;
  font-weight: 600;
  width: 80%;
  word-break: keep-all;
}

.answerList:hover,
.answerList:focus {
  /* background-color: rgb(244, 59, 0); */
  background-color: #00c362;
  color: whitesmoke;
}

.status {
  height: 20px;
  width: 80%;
  background-color: white;
  border-radius: 20px;
}

.statusBar {
  height: 100%;
  border-radius: 20px;
  background: #fc4a1a; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f7b733,
    #fc4a1a
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f7b733,
    #fc4a1a
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.progress-outer {
  background: #fff;
  border-radius: 50px;
  padding: 18px;
  margin: 10px 0;
  width: 80%;
  box-shadow: 0 0 10px rgba(209, 219, 231, 0.7);
}
.progress {
  height: 27px;
  width: 80%;
  margin: 0;
  overflow: visible;
  background: #eaedf3;
}
.progress .progress-bar {
  border-radius: 50px;
}
.progress .progress-value {
  position: relative;
  left: -45px;
  top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
}
.progress-bar.active {
  animation: reverse progress-bar-stripes 0.4s linear infinite,
    animate-positive 2s;
}
@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}
@keyframes animate-positive {
  0% {
    width: 0%;
  }
}