.theoryQuestion {
  background-color: #F4F4F4;
  padding: 24px 32px;
}

.theoryQuestion textarea.form-control,
.textAnswer,.theoryAnswer {
  border: none;
  padding: 12px 24px;
  background-color: white;
  border-left: solid 2px red;
  border-radius: 0px;
}
.theoryAnswer{
  min-height: 200px;
  max-height: 50vh;
  width: 100%;
  overflow-y: auto;
}
.theoryQuestion textarea.form-control:focus {
  box-shadow: none;
}

.theoryQuestion button.wrongAnswer {
  border: solid 1px #CC3A3D;
  color: #CC3A3D;
}

.theoryQuestion label {
  color: var(--Neutral04, #4D4D4D);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
}

/* .theoryQuestion button.disableBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #CC3A3D;
  border-color: #ffffff;
  color: #ffffff;
  font-size: 16.421px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.6;
} */

button.correctAnswer.disableBtn {
  background-color: #CC3A3D;
  border-color: #ffffff;
  color: #ffffff;
}

button.wrongAnswer.disableBtn {
  background-color: #ffffff;
  border-color: #CC3A3D;
  color: #CC3A3D;
}

.ansQuestion {
  display: none;
}

.proficiency-assessment-test-header {
  border-bottom: 1px solid #E5E5E5;
}

.borderRight {
  border-right: 1px solid #CCC;
  padding: 0px 32px;
}

.proficiency-assessment-test-content .card-body label.form-check-label {
  color: var(--Secondary, #111624);
  text-align: center;
  font-family: Montserrat;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 33.6px */
  margin-left: 16px;
}

.proficiency-assessment-test-content .card-body input.form-check-input {
  width: 25px;
  height: 25px;
}

.answerContent {
  color: var(--Secondary, #111624);
  font-size: 20px;
  font-weight: 500;
  line-height: 140%;
  /* 28px */
}

.form-control:disabled {
  background-color: white;
  opacity: 1;
}

#carousel-counter {
  font-size: 0.75rem;
}

.btn-carousel {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border: 1px solid #000;
  color: #000;
}

.btn-carousel i {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.btn-carousel:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.proficiency-assessment-feature .proficiency-assessment-icon svg {
  width: 95%;
}

.theoryQuestion .theoryPercent button {
  font-weight: 700;
}
.theoryQuestion .theoryPercent button.invisible {
 visibility: unset !important;
}
.theoryQuestion .theoryPercent button:hover,
.theoryQuestion .theoryPercent button.percentActive {
  background-color: #CC3A3D !important;
  color: white !important;
}

.showByMathpix #setText img {
  max-width: 100%;
}

.page-content .proficiency-assessment-wrap table tbody tr td img,
.showByMathpix #setText table tbody tr td img {
  max-width: 100% !important;
  object-fit: contain !important;
}
.btn-result-levelTest {
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--White-Smoke, #F3F3F3);
}
.btn-result-levelTest:hover {
  background: var(--White-Smoke, #f8eaea);

}

/* Styles for btnTrueFalse */
button.btnTrueFalse {
  padding: 0.75rem 1.5rem;
  border-radius: 35px;
  color: var(--red-main);
  border: 1px solid var(--red-main);
  background-color: white;
  font-size: 16.421px;
  font-style: normal;
  font-weight: 700;
  stroke: var(--red-main);
  transition: all 0.3s ease; /* Smooth transition for hover and active effects */
}

/* Hover and active states */
button.btnTrueFalse:hover,
button.btnTrueFalse.active {
  color: white;
  background-color: var(--red-main);
}

button.btnTrueFalse:hover svg path,
button.btnTrueFalse.active svg path {
  stroke: white; /* Change SVG stroke color to white */
}