.webform-buttons {

}

.webform-button {
    text-align: center;
    margin: 0.5rem;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: var(--bs-body-font-family);
}

/*
.webform-button[aria-checked=true] {
  background-color: #d4d0ce !important;
}
*/

.webform-button[aria-checked=true] {
  background-color: #F9F5F2 !important;
  box-shadow: 0 0 0 0.25rem rgba(0,114,188,0.5);
}
.webform-button:hover {
  /*border-color: rgb(0,114,188,0.5) !important;*/
  background-color: #F9F5F2 !important;
  box-shadow: 0 0 0 0.25rem rgba(0,114,188,0.5);

}

.webform-button-title {
    color: #0072bc;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.webform-button-description {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
}

/*
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    --bs-btn-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
*/


/*

<div class="webform-buttons">
{% set count = 0 %}
{% for value, text in options %}
  {% if count%2 == 0 %}<div class="row">{% endif %}
  <div class="btn btn-light col-6 webform-button" data-option-value="{{ value }}">
    <div class="webform-button-title">{{ text }}</div>
    {% if descriptions[value] %}<div class="webform-button-description">{{ descriptions[value] }}</div>{% endif %}
  </div>
  {% if count%2 == 0 %}</div>{% endif %}
{% endfor %}
</div>
*/

/*card body
#edit-topics .form-label {
  /*background-color: #f9f5f2 !important;
  background-color: #f9f5f2;
  padding: 1.5rem;
  border-radius: .625rem;
  /*border-color: transparent;
  border-color: transparent;
  border-width: 5px;
  line-height: 1.25rem;
  text-align: left;
  vertical-align: top;
}
#edit-topics .form-label:hover {
  border-color: rgb(0,114,188,0.5) !important;
}


<div class="webform-custom-buttons">
{# <div class="webform-custom-options-buttons"> #}
{% for value, text in options %}
  {# <div class="btn btn-secondary col-12" data-option-value="{{ value }}" style="text-align:center; "> #}
  <div class="btn btn-light col-12 webform-custom-button card-title" data-option-value="{{ value }}" style="text-align:center; margin: 0.5rem; text-transform: none;font-family: var(--bs-body-font-family);">
  {{ text }}
  {% if descriptions[value] %}<div class="description card-text">{{ descriptions[value] }}</div>{% endif %}
  </div>
{% endfor %}
</div>

.webform-custom-buttons {
  text-transform: none;
}

.webform-custom-options-button {
  text-align:center; 
  margin: 0.5rem;
}

  flex: 1;
  display: table-cell;
  margin: 0 5px 10px 5px;
  border: 3px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  color: #666;
.webform-custom-options-button .description {
  font-size: .8em;
}

.webform-custom-options-button[data-option-value]:hover {
  border-color: #999;
  color: #333;
}

.webform-custom-options-button[data-option-value]:focus {
  border-color: #999;
  color: #333;
}


.webform-custom-options-button[data-option-value][aria-checked=true] {
  /*border-color: #0074bd;
  color: #000;
  background-color: red !important;
  color: red !important;
}


.webform-custom-options-button[data-option-value][aria-checked=true]:focus {
  box-shadow: 0 0 5px #0074bd;
}

.webform-custom-options-button[data-option-value][aria-disabled=true],
.webform-custom-options-button[data-option-value][aria-disabled=true]:hover,
.webform-custom-options-button[data-option-value][aria-disabled=true]:focus {
  cursor: not-allowed;
  border-color: #ccc;
  color: #999;
}

@media (max-width: 600px) {
  .webform-custom-options-buttons {
    display: block;
    margin: 0;
  }

  .webform-custom-options-button {
    display: block;
    margin: 5px 0;
  }
}
*/