/*custom radio*/
input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before,
input[type="radio"]+div:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid var(--theme-color-brand-primary);
  background-color: transparent;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before,
input[type="radio"]:checked + div:before {
  background-color: var(--theme-color-brand-primary);
}
input[type="radio"]:checked + label:before {
	border: 2px solid var(--theme-color-brand-primary);
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}