@import "flive-vars";

.form-group {
  width: 100%;
  font-size: 1rem;
  line-height: 1.35em;
}

.with-marge {
  margin: 0 0 1.6rem 0;
}

.form-label {
  font-size: .9rem;
  line-height: 1.8em;
  color: $form-label-color;
  display: block;
  margin-bottom: 6px;
}

.form-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mandatory {
  margin-left: 7px;
  color: red;
}

.checkable {
  display: flex;
  align-items: center;
  .content {
    width: 100%;
  }
}

@keyframes unvalid {
    from {color: limegreen;}
    to {color: lightgrey;}
}

@keyframes valid {
    from {color: lightgrey;}
    to {color: limegreen;}
}

.checkable::before {
  color: lightgrey;
  content: '✔';
  margin-right: 10px;
  animation-name: unvalid;
  animation-duration: 0.5s;
}

.checkable-ok::before {
  color: limegreen;
  content: '✔';
  margin-right: 10px;
  animation-name: valid;
  animation-duration: 0.5s;
}