text-align: center; }

#sponsorship_application_containerform {

margin-bottom:0; }

.package_only_label {color:#666666; }

.active {color:#3776ab; } }

#sponsorship_application_containerform .package_only.active {color:#3776ab; }

#sponsorship_application_containerform .active {color:#3776ab; }

#sponsorship_application_container#package_selection {

display: inline-block; }

#sponsorship_application_container#package_selectionli {

form {

margin-bottom:0;

.package_only_label {

.package_only {

color:$grey;

}

.package_only.active {

color:$blue;

}

.active {

color:$blue;

}

<ulid="id_{{ field.name }}">

{% for benefit in field.field.queryset %}

<liclass="{% cycle '' 'highlight' %}">

<labelfor="id_{{field.name}}_{{ forloop.counter0 }}"benefit_id="{{ benefit.id }}">

<labelfor="id_{{field.name}}_{{ forloop.counter0 }}"{%ifbenefit.package_only%}class='package_only'{%endif%}benefit_id="{{ benefit.id }}">

<inputid="id_{{field.name}}_{{ forloop.counter0 }}"name="{{ field.name }}"type="checkbox"value="{{ benefit.id }}"{%ifbenefit.unavailability_message%}disabled{%endif%}{%ifbenefit.idinfield.initial%}checked{%endif%}{%ifbenefit.package_only%}package_only='true'{%endif%}>

<span{%ifbenefit.package_only%}class='package_only_label'{%endif%}>{{ benefit.name }}</span>

<span>{{ benefit.name }}</span>

{% if benefit.description %}<iclass="fa fa-info"title="{{ benefit.description }}"></i>{% endif %}

{% if benefit.package_only %}<iclass="fa fa-cubes"title="{{ benefit_model.PACKAGE_ONLY_MESSAGE }}"></i>{% endif %}

{% if not benefit.has_capacity %}<iclass="fa fa-close"title="{{ benefit_model.NO_CAPACITY_MESSAGE }}"></i>{% endif %}