.agreement-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2em;
}
.agreement-line__left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50px;
}
.agreement-line__right {
  flex-basis: calc(100% - 50px);
  font-size: 14px;
}
.agreement-checkbox {
  appearance: none;
  position: relative;
  width: 30px;
  height: 30px;
  box-shadow: inset 0 0 5px rgb(0 0 0 / 0.2);
  border-radius: 10px;
  border: 1px solid #FFFFFF;
  transition: 300ms;
}
.agreement-checkbox::after{
  color: #b4fe02;
  content: "\2714";
  position: absolute;
  top: -3px;
  left: 5px;
  width: 0px;
  height: 0px;
  font-size: 24px;
  transition: 300ms;
  overflow: hidden;
}
.agreement-checkbox:checked::after {
  width: 30px;
  height: 30px;
  transition: 300ms;
}
.agreement-checkbox:disabled {
  background: #ccc;
  border-color: #ccc;
}
.agreement-checkbox:disabled::after {
  filter: grayscale(100%);
}
.agreement__error {
  color: #f22a4f;
  display: none;
}
.agreement-checkbox--error {
  border: 1px solid #f22a4f;
  box-shadow: none;
}