.ability-numbers-card__inner {
  padding: 25px 12px;
  border-radius: 9px;
  background: #fff;
  transition: all ease 0.5s;
  border: 1px solid var(--color-blue-a);
}

.ability-numbers__cards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 48px -6px 24px;
}

.ability-numbers__card {
  width: 25%;
  margin: 0 6px;
  transition: all ease 0.5s;
}

.ability-numbers__card:hover {
  transform: translateY(-7px);
}

.ability-numbers-card__inner:hover {
  background-color: var(--color-blue-2);
  cursor: pointer;
}

.ability-numbers-card__inner:hover * {
  color: #fff !important;
}

.ability-numbers__button--review,
.course-content__sidebar--btn-report,
.course-content__sidebar--btn-report-report {
  background-color: var(--color-blue-7);
  padding: 12px 24px;
  border-radius: 9px;
  display: inline-block;
  text-align: center;
}

.ability-numbers__button--review:hover,
.course-content__sidebar--btn-report:hover {
  background-color: var(--color-blue-2);
}

.course-content__sidebar--btn-report {
  margin-bottom: 1rem;
}

.course-banner__text--title {
  margin-bottom: 24px;
}
.course-banner__text--title.--more {
  margin-top: 12px;
}

.review-item .card {
  border: 1px solid var(--color-blue-a) !important;
  margin-bottom: 11px;
  border-radius: calc(0.25rem - 1px) !important;
}

.review-item__header {
  background: #fff;
  border-bottom: 0 !important;
  padding: 8px 0;
}

th.stt-column {
  white-space: nowrap;
}

.review-item__header button {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  outline: none !important;
  box-shadow: none !important;
  border: 0;
  border-left: 5px solid var(--color-blue-5);
  padding: 0 16px;
  border-radius: 0;
}
.review-item__header--icon-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-item__header--content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-item__header button.--red {
  border-color: var(--color-red-e);
}

p.review-item__header--text {
  margin-bottom: 0;
  width: 100%;
  padding: 0 8px;
}

span.review-item__header--title {
  display: block;
}

.review-item__header .collapsed .--up {
  display: none;
}

.review-item__header .--down {
  display: none;
}

.review-item__header .collapsed .--down {
  display: block;
}

.review-item__header button i {
  font-size: 20px;
}

table.review-item__table th {
  background-color: #D5E0FC;
  color: var(--color-blue-0);
  font-weight: 500;
}

table.review-item__table {
  border-color: var(--color-blue-a);
  text-align: center;
}

.review-item__table tbody tr td {
  color: var(--color-dark-6);
  padding: 8px 0;
}
.review-item__table tbody tr td span {
  font-weight: 500;
}

.review-item__btn-test {
  background-color: var(--color-blue-5);
  padding: 10px 24px;
  border-radius: 20px;
  display: inline-block;
  color: var(--color-white) !important;
  min-width: 120px;
  text-align: center;
  margin-right: 10px;
}

.review-item__more button {
  background-color: var(--color-blue-7);
  color: var(--color-white);
  padding: 8px;
  width: 100%;
  border: 0;
  outline: none;
  box-shadow: none;
}
.review-item__more button.loadMore:after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro";
  margin-left: 5px;
}
@media(min-width:992px){
  .review-item__header--content{
    width: 100%;
  }
}
@media(max-width:992px){
  .review-item__header--content{
    width: 100%;
  }
  .review-item__header button{
    flex-direction: column;
  }
  .review-item__header--icon-btn{
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .ability-numbers__cards {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .ability-numbers__card.ability-numbers-card {
    width: 100%;
    margin-bottom: 1rem;
  }
  .review-item__header button{
    flex-wrap: wrap;
  }
  .review-item__table tbody tr td{
    font-size: 10px;
  }
  table.review-item__table th{
    font-size: 10px;
  }
  .review-item__header--content{
    width: 100%;
  }
  .review-item__btn-test{
    padding: 8px 24px;
  }
}
@media (max-width: 320px) {
  .review-item__btn-test{
    padding: 6px 24px;
  }
  .review-item__header--result, .review-item__header--count{
    font-size: 10px;
  }
}
@keyframes growProgressBar {
  0%, 33% {
    --pgPercentage: 0;
  }
  100% {
    --pgPercentage: var(--value);
  }
}
@property --pgPercentage {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
div[role=progressbar] {
  --size: 41px;
  --fg: #6979F8;
  --color: #12387A;
  --bg: #D5E0FC;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, white 88%, transparent 0 99.9%, white 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-size: calc(var(--size) / 5);
  color: var(--color);
  border: 1px solid var(--bg);
  transform: rotateY(180deg);
  margin: auto;
}
div[role=progressbar-red] {
  --size: 41px;
  --fg: #F32148;
  --color: #12387A;
  --bg: #D5E0FC;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, white 88%, transparent 0 99.9%, white 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
  font-size: calc(var(--size) / 5);
  color: var(--color);
  border: 1px solid var(--bg);
  transform: rotateY(180deg);
  margin: auto;
}
div[role=progressbar-red]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
  border: 1px solid var(--bg);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  font-size: 12px;
  color: var(--fg);
}

div[role=progressbar]::before {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
  border: 1px solid var(--bg);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  font-size: 12px;
  color: var(--fg);
}

.course-content__filter-field-search.--review {
  max-width: 393px;
  margin: 0 16px 0 0;
}

@media (max-width: 767px) {
  .course-content__filter-field-search {
    margin-bottom: 1rem;
    margin-right: 0;
  }
  .course-content__filter .col-lg-3 {
    order: -1;
  }
  .course-content__filter-button {
    margin-bottom: 0;
    margin-top: 1rem;
  }
}

/*# sourceMappingURL=ability.css.map */