.child-list {
  width: 100%;
  float: left;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 16px;
}
.child-list .single-child {
  width: calc(20% - 13px);
  max-width: calc(20% - 13px);
  flex: calc(20% - 13px);
  float: left;
  position: relative;
  border-radius: 10px;
  background: rgb(255 255 255);
  border: 1px solid #e0eaf3;
  padding: 70px 15px 15px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
.child-list .single-child:hover {
  box-shadow: 0px 10px 15px 0px rgb(16 75 134 / 10%);
}
.child-list .single-child .ribbon-theme {
  --f: 10px;
  --r: 8px;
  --t: 15px;
  position: absolute;
  inset: var(--t) calc(-1 * var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--f)),
    calc(100% - var(--f)) 100%,
    calc(100% - var(--f)) calc(100% - var(--f)),
    0 calc(100% - var(--f)),
    var(--r) calc(50% - var(--f) / 2)
  );
  background: #14ac44;
  box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
}
.child-list .single-child .child-image {
  width: 100px;
  height: 100px;
  float: left;
  position: absolute;
  text-align: center;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  border-radius: 180px;
}
.child-list .single-child .child-image:after {
  content: "";
  width: 84px;
  height: 84px;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 8px solid rgb(255 255 255 / 70%);
  border-radius: 180px;
}
.child-list .single-child .child-image img {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  border-radius: 180px;
}
.child-list .single-child .course-name {
  width: 100%;
  float: left;
  position: relative;
  text-align: center;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
  color: #085092;
  line-height: 24px;
}
.child-list .single-child .child-rating {
  width: 100%;
  float: left;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.child-list .single-child .child-rating .star-group {
  display: flex;
  align-items: center;
  justify-content: center;
}
.child-list .single-child .child-rating .star-group .star-rating {
  font-size: 12px;
  font-weight: 600;
}
.child-list .single-child .child-description {
  width: 100%;
  float: left;
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 13px;
  color: gray;
  line-height: 20px;
  height: 60px;
  overflow: hidden;
}
.child-list .single-child .child-dob {
  width: 100%;
  float: left;
  position: relative;
  color: #5e5e5e;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
}
.child-list .single-child .child-dob img {
  width: 18px;
  float: none;
  position: relative;
  height: 18px;
  padding: 2px;
  margin-right: 5px;
}
.child-list .single-child .child-grade {
  width: 100%;
  float: left;
  position: relative;
  margin-bottom: 20px;
  color: #323232;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.child-list .single-child .child-grade strong {
  width: auto;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-weight: 600;
}
.child-list .single-child .child-actions {
  width: 100%;
  float: left;
  position: relative;
  text-align: center;
  margin-top: 10px;
}
.child-list .single-child .child-actions .btn {
  display: inline-block;
  vertical-align: top;
  padding: 6px 12px;
  border-radius: 5px;
}
.child-list .single-child .course-progress {
  width: 100%;
  float: left;
  position: relative;
  text-align: center;
  margin-top: 20px;
}
.child-list .single-child .course-progress .course-progress-full {
  width: 100%;
  position: relative;
  background: #ebebeb;
  border-radius: 180px;
  overflow: hidden;
  height: 5px;
}
.child-list
  .single-child
  .course-progress
  .course-progress-full
  .course-progress-active {
  background: #00ac3f;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  border-radius: 180px;
}
.child-list .single-child .course-progress .course-progress-label {
  width: 100%;
  float: left;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.child-list
  .single-child
  .course-progress
  .course-progress-label
  .course-progress-leftlabel {
  width: auto;
  float: left;
  position: relative;
  text-align: center;
  font-weight: normal;
  font-size: 13px;
  color: gray;
  line-height: 20px;
}
.child-list
  .single-child
  .course-progress
  .course-progress-label
  .course-progress-rightlabel {
  width: auto;
  float: left;
  position: relative;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #00ac3f;
  line-height: 20px;
}