Radio Buttons stopped working when styled as button look like

You were nearly there. You need to use label as oppose to span to make sure that when clicked the radio button are getting checked and the active green CSS is applied to them.

I have fixed up your HTML and its all working as expected and created a fully working answer.

Also i have added some jQuery code to show (for demo purposes) that when input type radio button are getting clicked (change event) their correct value is showing in the console.log as well.

Live Demo:

$('input[type="radio"]').change(function() {
  console.log($(this).val()) //just for demo purposes
})

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  width: 0;
  position: absolute;
}

.radio-toolbar label {
  display: inline-block;
  background-color: transparent;
  padding: 10px 20px;
  width: 30.33%;
  margin: 5px 4px;
  font-size: 16px;
  border: 2px solid #bfbfbf;
  border-radius: 1px;
}

.radio-toolbar label:hover {
  background-color: #f79da9;
  color: #fff;
  transition: 0.5s;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:focus+label {
  border: 2px dashed #444;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bfb;
  border-color: #4c4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Time Zone: EST</label><br>
<p class="line-item-property__field radio-toolbar">
  <input required type="radio" id="10" name="properties[Time Zone: EST]" value="10:00 am" checked><label for="10">10:00 am</label>
  <input required type="radio" id="11" name="properties[Time Zone: EST]" value="11:00 am"> <label for="11">10:00 am</label>
  <input required type="radio" id="12" name="properties[Time Zone: EST]" value="12:00 am"><label for="12">12:00 am</label>
  <input required type="radio" id="13" name="properties[Time Zone: EST]" value="1:00 pm"> <label for="13">1:00 pm</label>
  <input required type="radio" id="14" name="properties[Time Zone: EST]" value="2:00 pm"> <label for="14">2:00 pm</label>
  <input required type="radio" id="15" name="properties[Time Zone: EST]" value="3:00 pm"> <label for="15">3:00 pm</label>
  <input required type="radio" id="16" name="properties[Time Zone: EST]" value="4:00 pm"><label for="16">4:00 pm</label>
  <input required type="radio" id="17" name="properties[Time Zone: EST]" value="5:00 pm"> <label for="17">5:00 pm</label>
  <input required type="radio" id="18" name="properties[Time Zone: EST]" value="6:00 pm"><label for="18">6:00 pm</label>
  <input required type="radio" id="19" name="properties[Time Zone: EST]" value="7:00 pm"> <label for="19">7:00 pm</label>
  <input required type="radio" id="20" name="properties[Time Zone: EST]" value="8:00 pm"> <label for="20">8:00 pm</label>
  <input required type="radio" id="21" name="properties[Time Zone: EST]" value="9:00 pm"> <label for="21">9:00 am</label>
  <input required type="radio" id="22" name="properties[Time Zone: EST]" value="10:00pm"><label for="22">10:00 am</label>
</p>

You must use label and not span tag, read this article: Labeling Controls

<input required type="radio" name="properties[Time Zone: EST]" id="t1" value="10:00 am" checked><label for="t1">10:00 am</label>

Also, you should group items with fieldset replace your label to legend, or use aria tags (role=group, aria-labelledby) more about grouping elements: https://www.w3.org/TR/WCAG20-TECHS/ARIA17.html

Example:

<fieldset class="line-item-property__field radio-toolbar">
  <legend>Time Zone: EST</legend>
  <input required type="radio" id="a10" name="properties[Time Zone: EST]" value="10:00 am" checked><label for="a10">10:00 am</label>
  <input required type="radio" id="a11" name="properties[Time Zone: EST]" value="11:00 am"> <label for="a11">10:00 am</label>
  <input required type="radio" id="a12" name="properties[Time Zone: EST]" value="12:00 am"><label for="a12">12:00 am</label>
  <input required type="radio" id="a13" name="properties[Time Zone: EST]" value="1:00 pm"> <label for="a13">1:00 pm</label>
  <input required type="radio" id="a14" name="properties[Time Zone: EST]" value="2:00 pm"> <label for="a14">2:00 pm</label>
  <input required type="radio" id="a15" name="properties[Time Zone: EST]" value="3:00 pm"> <label for="a15">3:00 pm</label>
  <input required type="radio" id="a16" name="properties[Time Zone: EST]" value="4:00 pm"><label for="a16">4:00 pm</label>
  <input required type="radio" id="a17" name="properties[Time Zone: EST]" value="5:00 pm"> <label for="a17">5:00 pm</label>
  <input required type="radio" id="a18" name="properties[Time Zone: EST]" value="6:00 pm"><label for="a18">6:00 pm</label>
  <input required type="radio" id="a19" name="properties[Time Zone: EST]" value="7:00 pm"> <label for="a19">7:00 pm</label>
  <input required type="radio" id="a20" name="properties[Time Zone: EST]" value="8:00 pm"> <label for="a20">8:00 pm</label>
  <input required type="radio" id="a21" name="properties[Time Zone: EST]" value="9:00 pm"> <label for="a21">9:00 am</label>
  <input required type="radio" id="a22" name="properties[Time Zone: EST]" value="10:00pm"><label for="a22">10:00 am</label>
</fieldset>

Pay attention despite the specification HTML5 about ID as it has many consequences, for example to create css rules, there is a good question and an answer to it

You must understand that any of your html must comply with all required web standards including WCAG accessibility, you can read the accessibility requirements in your region here