/*
 * The volunteer application (volunteer.html, 0238). Wears apply.css's frame;
 * this is only what it needs beyond it. Tokens from styles.css.
 */

/* An opportunity: a full-width card with its name and what it involves. */
.volunteer__choices {
  width: 100%;
}

.volunteer__choice {
  width: 100%;
}

.volunteer__choice span {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

.volunteer__choice span strong {
  font-weight: 700;
}

.choice.volunteer__choice input[type="checkbox"]:checked + span::before {
  margin-right: 6px;
}

.volunteer__years {
  max-width: 140px;
}

/* The news and text boxes: lighter than the agreement's. */
.agree--light {
  background: transparent;
  border-width: 1px;
  font-weight: 400;
}