@keyframes ani-spinner {
  0% {
    rotate: 0turn;
  }
  100% {
    rotate: 1turn;
  }
}
.joinWrap .qualification-groups {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.joinWrap .qualification-groups .qualification-group-title {
  display: block;
  margin-bottom: 1rem;
  color: #3b3844;
  font-size: clamp(1.4rem, 1.5625vw, 1.6rem);
  font-weight: 700;
}

.joinWrap .qualification-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.joinWrap .qualification-list > div label {
  align-items: flex-start;
}
.joinWrap .qualification-list > div label i {
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.joinWrap .qualification-list > div label span {
  line-height: 1.5;
}

.joinWrap .learner-type-radios {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.2rem;
}
.joinWrap .learner-type-radios > .sel-m {
  flex: 1 1 26rem;
  display: flex;
}
.joinWrap .learner-type-radios > .sel-m label {
  flex: 1;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: 1.8rem 2rem;
  border: 0.1rem solid #ccc9d5;
  border-radius: 1rem;
  background: #ffffff;
  color: #524f5d;
  font-size: clamp(1.6rem, 1.7578vw, 1.8rem);
  line-height: 1.4;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.joinWrap .learner-type-radios > .sel-m label i {
  flex-shrink: 0;
}
.joinWrap .learner-type-radios > .sel-m label:hover {
  border-color: #6d8fff;
  background: #f5f7ff;
}
.joinWrap .learner-type-radios > .sel-m input:not(:checked) + label:hover i::before {
  background-color: #6d8fff;
}
.joinWrap .learner-type-radios > .sel-m input:checked + label {
  border-color: #3060ff;
  box-shadow: 0 0 0 0.1rem #3060ff inset;
  background: #ebf0ff;
  color: #1f44bd;
  font-weight: 600;
}
.joinWrap .learner-type-radios > .sel-m input:checked + label i {
  box-shadow: 0 0 0 0.6rem #3060ff inset;
}

.joinWrap .sel-m input:focus + label i,
.joinWrap .sel-l input:focus + label i {
  outline: 0.2rem solid #3060ff;
  outline-offset: 0.3rem;
}