CSS definitions in django-allauth account templates - django

Question

I am trying out django-allauth and have come across a block while customizing the allauth account templates. I am presently working on the emails.html template but I am unable to find any definition for the css classes used inside the default templates.
CSS classed such as ctrlHolder or primary_email. Please help me with figuring out where these are defined. I can use the bootstrap css but was hoping to keep the default ones if they are good enough.
accounts/emails.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail Addresses" %}</h1>
{% if user.emailaddress_set.all %}
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
<form action="{% url 'account_email' %}" method="post">
{% csrf_token %}
<div class="form-group">
{% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder">
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<input id="email_radio_{{ forloop.counter }}" type="radio" name="email"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
value="{{ emailaddress.email }}"/>
{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="verified">{% trans "Verified" %}</span>
{% else %}
<span class="unverified">{% trans "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
{% endfor %}
<div class="buttonHolder">
<button class="secondaryAction" type="submit"
name="action_primary">{% trans 'Make Primary' %}</button>
<button class="secondaryAction" type="submit"
name="action_send">{% trans 'Re-send Verification' %}</button>
<button class="primaryAction" type="submit" name="action_remove">{% trans 'Remove' %}</button>
</div>
</div>
</form>
{% else %}
<p>
<strong>{% trans 'Warning:' %}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
<h2>{% trans "Add E-mail Address" %}</h2>
<form method="post" action="{% url 'account_email' %}" class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
</form>
{% endblock %}
{% block extra_body %}
<script type="text/javascript">
(function () {
var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function (e) {
if (!confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
{% endblock %}
Here I have my custom base page being called via the accounts base.html
{% extends "shared/base.html" %}

Answer 1

The class is not defined in allauth. It is there so that you can define it in your CSS. I guess the names are ctrlHolder and buttonHolder because they are placeholder class names for the input-control and button html statements.