:root {
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
}

.academy {
}
.academy__left {
  padding: 1.6rem;
}
.academy__right {
  padding: 1.6rem 0;
}
.academy__img {
  display: inline-block;
  width: 100%;
  border: 4px solid var(--gray-900);
  border-radius: 4px;
}
.academy__details {
  margin-bottom: 1.2rem;
}
.academy__info,
.academy__seats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.academy__tooltip {
  width: calc(33% - 1.6rem);
  padding: 0.4rem 1.6rem;
  border: 2px solid var(--gray-900);
  border-radius: 0.4rem;
  text-align: center;
}
.academy__tooltip span {
  display: block;
}
.academy__seat {
  width: calc(50% - 1.6rem);
  text-align: center;
  padding: 0.4rem 1.6rem;
  background-color: var(--gray-900);
  color: var(--gray-50);
}
@media only screen and (max-width: 50em) {
  .academy__title,
  .academy__details {
    text-align: center;
  }
}

.form-mcq {
}
.mcq {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.4rem;
  padding: 2.4rem 1.6rem;
  border-radius: 0.8rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.mcq__title {
  font-size: 2.4rem;
  font-weight: normal;
  color: var(--gray-800);
  margin-bottom: 1.2rem;
  text-align: center;
}
.mcq__current {
  text-align: center;
  color: var(--gray-700);
  font-size: 1.2rem;
}
.mcq__options {
}
.mcq__option {
  margin-bottom: 0.8rem;
}
.mcq__radio {
  display: none;
}
.mcq__radio ~ label {
  display: block;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.8rem 2.4rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  text-align: center;
}
.mcq__radio ~ label:hover {
  background-color: var(--gray-100);
}
.mcq__radio:checked ~ label {
  background-color: var(--gray-200);
}

.mcq__radio:checked ~ label::before {
  content: "\2713";
  display: inline-block;
  font-size: 2rem;
  margin-right: 0.4rem;
}

.mcq__progress {
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  padding: 0.8rem;
  border-radius: 500px;
  background-color: var(--gray-200);
}
.mcq__progress span {
  display: block;
  height: 100%;
  border-radius: 500px;
  background-color: var(--gray-700);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
