.crm-create-election-form-block h2 {
    margin: 0;
    border-bottom: solid 1px #ccc;
    padding-bottom: 7px;
    margin-bottom: 7px;
}
.crm-create-election-form-block-buttons .crm-submit-buttons {
    padding-top: 20px;
}
.crm-delete-election-form-block .election-delete-message{
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 12px;
    display: block;
}
.crm-election-position-nominations-block {
    padding-bottom: 1.5rem;
    display: block;
    clear: both;
}
.crm-container .status span.msg-title:after {
    content: "";
}
.crm-container .status span.msg-title:not(:empty):after {
    content: ":";
}
.crm-container .status.election-visibility-message {
    padding: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.crm-container .crm-elections-list-block .status.election-visibility-message {
    margin-bottom: 0px;
}
.crm-election-position-nominations-block a:not(.election-btn) {
    text-decoration: none;
    color: inherit;
}
.crm-election-position-nominations-block table.dataTable th {
    color: #444;
    padding: 10px 10px;
}
.crm-election-position-nominations-block table {
    margin-bottom: 0;
}
.crm-election-position-nominations-block h2 {
    margin-top: 0;
}
.crm-election-position-nominations-block h3 {
    padding: 10px;
}
.crm-container .crm-hover-button.action-item.danger-button {
    color: #E43D2B;
}
.crm-container .fa-print {
    display: none;
}
.crm-container .status {
    background-image: none;
    margin-bottom: 20px;
    padding: 0.5em;
    color: #3e3e3e;
    padding-left: 0px;
    font-weight: normal;
}
.crm-container .status .eligible-block {
    flex: 1 1 14rem;
}
.crm-container .status:has(> .eligible-block) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.crm-container .status span.msg-title {
    font-weight: bold;
}

.positions-description {
    padding-top: 10px;
    padding-left: 5px;
    display: block;
}

.election-nav-action-link {
    margin-left: 20px;
    display: inline-block;
}

.election-nav-action-button {
    margin-right: 20px !important;
    display: inline-block;
}

.crm-container .icon {
    display: none;
}
.crm-election-view-block h2 {
    padding: 0;
    margin: 0 0 0.5rem;
    text-align: center;
}
.crm-container .welcome-message h2 {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: left;
}
.crm-election-view-block h3 {
    padding: 0;
    margin: 0;
    background: none;
    padding-top: 10px;
    padding-bottom: 10px;
}
.crm-elections-action-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
}
.crm-elections-action-block .messages.status {
    flex: 1 1 100%;
    margin: 0;
}
.crm-elections-helptext-block {
    font-style: italic;
    font-size: 90%;
}
.crm-election-view-block .no-result-message {
    text-align: center;
    padding-top: 15px;
}
.crm-election-form-block-container .crm-i.fa-check {
    display: none;
}

.election_row_style {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
.election_row_style > .crm-election-nominated-block {
    margin: 0;
}

.crm-election-nominated-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--election-radius, 4px);
    text-align: center;
    overflow-wrap: anywhere;
}
.crm-election-nominated-block .crm-election-nominated-block.inside {
    padding: 0;
    border: 0;
    flex: 1 1 auto;
}
.crm-election-nominated-block a {
    display: block;
}
.crm-election-nominated-block img {
    display: block;
    width: 8rem;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 auto 0.5rem;
    border-radius: var(--election-radius, 4px);
}
.crm-election-nominated-block .election-btn {
    align-self: center;
}
.clearfix {
    clear: both;
}

.messages.status ul {
    padding-left: 30px;
}
.election-positions-rank-block {
    display: block;
    min-width: 0;
}
.election-positions-rank-block > a {
    display: block;
    height: 100%;
    text-decoration: none;
}
.election-positions-rank-block .crm-election-nominated-block {
    height: 100%;
}

.winner-type-label {

}
.crm-election-position-result-block h3 {

}

.candidate-details-block {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-bottom: 1.5rem;
}
.candidate-details-left-block {
    flex: 0 1 16rem;
    min-width: 0;
}
.candidate-details-right-block {
    flex: 1 1 18rem;
    min-width: 0;
}
.candidate-details-left-block img {
    display: block;
    width: 12rem;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--election-radius, 4px);
}

.vote-candidate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: solid 1px var(--election-border, #ddd);
}

.crm-election-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 1.25rem;
    width: 100%;
    padding-bottom: 15px;
}

.crm-election-form-row:last-child {
    padding-top: 15px;
}

.vote-candidate-row label {
    font-weight: normal;
    padding-bottom: 0.5rem;
    display: block !important;
}

.vote-candidate-row .left-profile-block {
    flex: 0 0 5rem;
}
.crm-election-form-col-left {
    flex: 0 0 10rem;
    max-width: 100%;
}
.crm-election-form-col-left.full {
    flex-basis: 100%;
}

.vote-candidate-row .left-profile-block img {
    display: block;
    width: 5rem;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--election-radius, 4px);
}

.vote-candidate-row .right-info-block {
    flex: 1 1 14rem;
    min-width: 0;
}
.crm-election-form-col-right {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 40rem;
}
.crm-election-form-col-right textarea,
.crm-election-form-col-right input[type="text"],
.crm-election-form-col-right input[type="url"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.vote-candidate-row select {
    max-width: 100%;
}

.messages.crm-error {
    background: #FBE3E4 none repeat scroll 0 0;
    padding: 10px;
    margin-bottom: 20px;
}

.crm-election-form-col-right.half {
    flex-basis: 50%;
}

.crm-election-form-row div.error {
    margin-left: 0;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
}
ul#errorList {
    padding-left: 20px;
    margin: 0;
}
.crm-container .crm-error {
    color: #8A1F11;
}

.error-heading {
    text-align: center;
}

.crm-elections-list-block .crm-accordion-body {
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.crm-elections-list-block .crm-accordion-wrapper {
    margin-bottom: 20px;
    width: 100%;
    float: left;
	display: flex;
	flex-flow: column;
}

.crm-elections-list-block .crm-accordion-wrapper + .crm-accordion-wrapper {
	margin-top: 1em;
}

.crm-elections-list-block .crm-accordion-wrapper p {
    margin: 1em 0;
}

.crm-election-form-block-container .select2-container .select2-choice > .select2-chosen, .crm-container .select2-search input {
  color: #333;
}

.crm-container .crm-elections-list-block .crm-accordion-header {
    cursor: pointer;
    background-image: none;
    padding: 8px 8px 8px 20px;
    border: solid 1px #70716B;
    font-weight: bold;
    width: 100%;
    float: left;
	display: flex;
	box-sizing: border-box;
}

.crm-container .crm-elections-list-block .crm-accordion-header span {
    float: left;
}

.crm-container .crm-elections-list-block .crm-accordion-header span:last-child {
    float: right;
	margin-left: auto;
    padding-right: 10px;
}

.crm-container .crm-elections-list-block .crm-accordion-wrapper .crm-accordion-header span:last-child:after {
    content: "\25B2";
}

.crm-container .crm-elections-list-block .crm-accordion-wrapper.collapsed .crm-accordion-header span:last-child:after {
    content: "\25BC";
}

.election-position-summary-row {
    display: block;
    float: left;
    width: 100%;
}

.election-position-summary-block {
    width: calc(33% - 15px);
    float: left;
    padding-right: 15px;
}

.election-position-summary-block ul {
    padding-left: 20px;
}

.crm-elections-list-block .crm-accordion-body p:last-child{
    margin-bottom: 0;
}


.crm-container .crm-elections-list-block .crm-accordion-body {
    border-radius: 0 0 4px 4px;
    border: 1px solid #70716B;
    border-top: 0;
    width: 100%;
    float: left;
	box-sizing: border-box;
}

.hide-element {
    display: none;
}

#positionsSortable tbody tr {
    cursor: pointer;
}

.crm-election-nominated-block.inside {
    width: 100%;
}

#crm-container.crm-public .label.label-select-col {
    padding-top: 12px;
}

.crm-election-date {
    font-weight: bold;
}

/* Candidate statements */
.election-statement {
    margin-top: 10px;
    max-width: 40em;
}
.election-statement summary {
    cursor: pointer;
    text-decoration: underline;
}
.election-statement p {
    margin: 8px 0;
}
.vote-candidate-row.no-photo .right-info-block {
    max-width: 100%;
}


/* Election overview (administrators) */
.crm-election-overview .election-stage {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.1em 0.6em;
    border-radius: 1em;
    font-size: 0.6em;
    font-weight: normal;
    vertical-align: middle;
    background: #e9ecef;
    color: #333;
}
.crm-election-overview .election-stage-nominations,
.crm-election-overview .election-stage-voting {
    background: #d1e7dd;
}
.crm-election-overview .election-stage-inactive,
.crm-election-overview .election-stage-deleted {
    background: #f8d7da;
}
.election-overview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.election-overview-block {
    flex: 1 1 18em;
}
.election-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.election-timeline li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.35em 0;
    border-bottom: 1px solid #ddd;
}
.election-timeline-passed {
    opacity: 0.6;
}
.election-timeline-passed .election-timeline-label::before {
    content: "\2713\00a0";
}
.election-counts th {
    text-align: left;
    padding-right: 2em;
    font-weight: normal;
}
.election-overview-actions {
    margin-top: 1.5em;
}
.election-overview-actions .button {
    display: inline-block;
    margin: 0 0.5em 0.5em 0;
}


/*
 * Buttons. The election's action links are plain <a class="election-btn"> elements (no JavaScript,
 * keyboard and screen reader friendly). Colours follow the active CMS theme where it publishes them
 * (WordPress block themes, Drupal Olivero, Joomla Cassiopeia) and fall back to CiviCRM's own button
 * colour, so no site customisation is needed. Set --election-brand-bg (and --election-brand-color) to brand them.
 */
.crm-container {
    /* A site can set --election-brand-bg (and --election-brand-color) anywhere above this to brand the election. */
    --election-btn-bg: var(--election-brand-bg, var(--wp--preset--color--contrast, var(--color--primary-40, var(--cassiopeia-color-primary, var(--crm-primary-color, #333)))));
    --election-btn-color: var(--election-brand-color, var(--wp--preset--color--base, #fff));
    --election-btn-hover-bg: color-mix(in srgb, var(--election-btn-bg) 82%, #000);
}
.crm-container .election-btn.election-btn,
.crm-container .crm-election-form-block-container button.crm-button.crm-button {
    color: var(--election-btn-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--election-btn-bg);
    border-radius: var(--election-radius, 4px);
    background: var(--election-btn-bg);
    color: var(--election-btn-color);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    box-shadow: none;
}
/* Text colour. Links inside status boxes would otherwise take the box's text colour (CiviCRM's alert rule). */
.crm-container .messages a.election-btn.election-btn,
.crm-container .messages a.election-btn.election-btn:visited,
.crm-container .election-btn.election-btn:visited {
    color: var(--election-btn-color);
}
.crm-container .election-btn.election-btn:hover,
.crm-container .election-btn.election-btn:focus-visible,
.crm-container .messages a.election-btn.election-btn:hover,
.crm-container .messages a.election-btn.election-btn:focus-visible,
.crm-container .crm-election-form-block-container button.crm-button.crm-button:hover,
.crm-container .crm-election-form-block-container button.crm-button.crm-button:focus-visible {
    background: var(--election-btn-hover-bg);
    border-color: var(--election-btn-hover-bg);
    color: var(--election-btn-color);
    text-decoration: none;
}
/* Where the browser can, the text colour is worked out from the button's own colour (white on dark, black
   on light) so any colour a theme or a site picks stays readable. */
@supports (color: lch(from red l c h)) {
    .crm-container .election-btn.election-btn,
    .crm-container .election-btn.election-btn:visited,
    .crm-container .messages a.election-btn.election-btn,
    .crm-container .messages a.election-btn.election-btn:visited,
    .crm-container .crm-election-form-block-container button.crm-button.crm-button {
        color: lch(from var(--election-btn-bg) clamp(0, (49.5 - l) * 1000, 100) 0 0);
    }
    .crm-container .election-btn.election-btn:hover,
    .crm-container .election-btn.election-btn:focus-visible,
    .crm-container .messages a.election-btn.election-btn:hover,
    .crm-container .messages a.election-btn.election-btn:focus-visible,
    .crm-container .crm-election-form-block-container button.crm-button.crm-button:hover,
    .crm-container .crm-election-form-block-container button.crm-button.crm-button:focus-visible {
        color: lch(from var(--election-btn-hover-bg) clamp(0, (49.5 - l) * 1000, 100) 0 0);
    }
}
.crm-container .election-btn.election-btn:focus-visible,
.crm-container .crm-election-form-block-container button.crm-button.crm-button:focus-visible {
    /* A ring in the button's own colour, a little away from it: visible on the page whatever the text colour. */
    outline: 3px solid var(--election-btn-bg);
    outline-offset: 3px;
}
.crm-container .election-btn.election-btn:active {
    transform: translateY(1px);
}
/* Cancel / back buttons on forms are the quiet variant */
.crm-container .crm-election-form-block-container button.crm-button.crm-button-type-cancel.crm-button-type-cancel {
    background: transparent;
    color: var(--election-btn-bg);
}
.crm-container .crm-election-form-block-container .crm-submit-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0 0;
}

/* Election form: tabs, date problems and the timeline preview */
.election-form-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--election-border, rgba(0, 0, 0, 0.18));
}
.crm-container .election-form-tabs .election-form-tab {
    margin: 0 0 -2px;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--election-radius, 4px) var(--election-radius, 4px) 0 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}
.crm-container .election-form-tabs .election-form-tab[aria-selected="true"] {
    border-color: var(--election-border, rgba(0, 0, 0, 0.18));
    border-bottom-color: var(--crm-container-bg-color, #fff);
    background: var(--crm-container-bg-color, #fff);
}
.crm-container .election-form-tabs .election-form-tab.has-problem::after {
    content: " !";
    color: #b3261e;
}
.election-form-panel[hidden] {
    display: none;
}
.election-form-panel h3 {
    margin: 1.25rem 0 0.25rem;
}
.election-date-problem {
    display: block;
    margin-top: 0.25rem;
}
.election-timeline-preview {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.election-timeline-preview li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--election-border, #ddd);
    /* Every row keeps the same space on the left, so the rows that are marked (now, problem) line up with the rest. */
    border-left: 4px solid transparent;
}
.election-timeline-preview .election-timeline-label {
    flex: 0 0 11rem;
    font-weight: 600;
}
.election-timeline-preview .election-timeline-range {
    flex: 1 1 14rem;
}
.election-timeline-preview .election-timeline-note {
    flex: 1 1 100%;
    font-size: 0.9em;
}
.election-timeline-preview .election-timeline-problem {
    border-left: 4px solid #b3261e;
}
.election-timeline-preview .election-timeline-problem .election-timeline-note {
    color: #b3261e;
}
.election-timeline-preview .election-timeline-current {
    border-left: 4px solid #2e7d32;
    background: rgba(46, 125, 50, 0.08);
}

.election-overview-turnout {
    margin-top: 1.5em;
}
.election-turnout-table {
    width: 100%;
    max-width: 40em;
}
.election-turnout-table th {
    text-align: left;
}

.election-overview-integrity {
    margin-top: 1.5em;
}
.election-audit-recent {
    width: 100%;
    max-width: 50em;
    margin-bottom: 0.5em;
}
.election-audit-recent th {
    text-align: left;
}

/* Election page: stage stepper and "what you can do now" */
.election-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.election-stepper-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 0;
    margin: 1rem 0 0.25rem;
    padding: 0;
    list-style: none;
}
.election-step {
    position: relative;
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.5rem 0.75rem 0.25rem 1.75rem;
    border-top: 3px solid var(--election-border, rgba(0, 0, 0, 0.18));
}
.election-step-marker {
    position: absolute;
    top: 0.65rem;
    left: 0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.55;
}
.election-step-label {
    font-weight: 600;
}
.election-step-date {
    font-size: 0.9em;
    opacity: 0.85;
}
.election-step-passed .election-step-marker {
    background: currentColor;
}
.election-step-passed {
    border-top-color: var(--election-btn-bg, currentColor);
}
.election-step-current {
    border-top-color: var(--election-btn-bg, currentColor);
}
.election-step-current .election-step-marker {
    opacity: 1;
    background: var(--election-btn-bg, currentColor);
    border-color: var(--election-btn-bg, currentColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--election-btn-bg, currentColor) 25%, transparent);
}
.election-stepper-note {
    margin: 0 0 1rem;
    font-size: 0.85em;
}
.election-next-action {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    border-left: 6px solid var(--election-btn-bg, currentColor);
    border-radius: var(--election-radius, 4px);
}
.election-next-message {
    margin: 0 0 0.75rem;
    font-size: 1.05em;
}
.election-next-action .election-next-buttons {
    margin: 0;
}
.election-next-action .election-next-message:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 600px) {
    .election-stepper-list {
        flex-direction: column;
    }
    .election-step {
        flex-basis: auto;
        border-top: 0;
        border-left: 3px solid var(--election-border, rgba(0, 0, 0, 0.18));
        padding-left: 1.5rem;
    }
    .election-step-marker {
        left: -0.5rem;
        background: var(--crm-container-bg-color, #fff);
    }
    .election-step-passed .election-step-marker {
        background: currentColor;
    }
    .election-step-passed,
    .election-step-current {
        border-left-color: var(--election-btn-bg, currentColor);
    }
}

/* Election list: cards */
.election-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
    margin: 0;
}
.election-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-sizing: border-box;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    border-top: 6px solid var(--election-card-accent, var(--election-btn-bg, currentColor));
    border-radius: var(--election-radius, 4px);
    overflow-wrap: anywhere;
}
.election-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.crm-container .election-card-title {
    flex: 1 1 10rem;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 1.25rem;
    line-height: 1.25;
    text-align: left;
}
.election-badge {
    flex: 0 0 auto;
    padding: 0.15rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}
.election-badge-nominations,
.election-badge-voting {
    background: color-mix(in srgb, var(--election-btn-bg, currentColor) 12%, transparent);
}
.election-card-description,
.election-card-line {
    margin: 0;
}
.election-card-actions {
    margin: 0;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Ballot: rank checks and the review dialog */
.election-rank-status {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9em;
}
.election-rank-status.election-rank-problem {
    color: #b3261e;
    font-weight: 600;
}
.election-review-dialog {
    box-sizing: border-box;
    width: min(40rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.5rem;
    overflow: auto;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.3));
    border-radius: var(--election-radius, 4px);
    background: var(--crm-container-bg-color, Canvas);
    color: var(--crm-container-text-color, CanvasText);
}
.election-review-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.election-review-dialog h2 {
    margin-top: 0;
}
.election-review-position h3 {
    margin: 1rem 0 0.25rem;
    font-size: 1.05rem;
}
.election-review-position ol,
.election-review-position ul {
    margin: 0.25rem 0 0;
    padding-left: 1.5rem;
}
.election-review-buttons {
    position: sticky;
    bottom: -1.5rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    background: var(--crm-container-bg-color, Canvas);
}
.election-review-none {
    margin: 1rem 0 0;
}
.crm-container .election-review-dialog .election-review-confirm,
.crm-container .election-review-dialog .election-review-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--election-btn-bg, #333);
    border-radius: var(--election-radius, 4px);
    height: auto;
    max-width: none;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    cursor: pointer;
}
.crm-container .election-review-dialog .election-review-confirm {
    background: var(--election-btn-bg, #333);
    color: var(--election-btn-color, #fff);
}
.crm-container .election-review-dialog .election-review-back {
    background: transparent;
    color: var(--election-btn-bg, #333);
}
.crm-container .election-review-dialog .election-review-confirm:hover,
.crm-container .election-review-dialog .election-review-confirm:focus-visible {
    background: var(--election-btn-hover-bg);
    border-color: var(--election-btn-hover-bg);
}
.crm-container .election-review-dialog .election-review-back:hover,
.crm-container .election-review-dialog .election-review-back:focus-visible {
    background: color-mix(in srgb, var(--election-btn-bg, #333) 12%, transparent);
}
.crm-container .election-review-dialog button:focus-visible {
    outline: 3px solid var(--election-btn-bg, #333);
    outline-offset: 3px;
}
@supports (color: lch(from red l c h)) {
    .crm-container .election-review-dialog .election-review-confirm {
        color: lch(from var(--election-btn-bg, #333) clamp(0, (49.5 - l) * 1000, 100) 0 0);
    }
    .crm-container .election-review-dialog .election-review-confirm:hover,
    .crm-container .election-review-dialog .election-review-confirm:focus-visible {
        color: lch(from var(--election-btn-hover-bg) clamp(0, (49.5 - l) * 1000, 100) 0 0);
    }
}
.election-review-dialog h2:focus {
    outline: none;
}

/* The choices are listed in order, so the numbers are shown whatever the theme does to lists. */
.crm-container .election-review-position ol,
.crm-container .election-your-vote-position ol {
    list-style: decimal;
}
.crm-container .election-review-position ul,
.crm-container .election-your-vote-position ul {
    list-style: disc;
}
.crm-container .election-review-position li,
.crm-container .election-your-vote-position li {
    display: list-item;
}

/* The help text above the ballot and the first position: room between them. */
.crm-vote-election-form-block:first-of-type {
    margin-top: 1.25rem;
}

/* Election page: the person's own ballot */
.election-your-vote {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--election-radius, 4px);
}
.crm-container .election-your-vote-title {
    margin: 0 0 0.25rem;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: left;
}
.election-your-vote-note {
    margin: 0 0 0.75rem;
    font-size: 0.9em;
}
.election-your-vote-positions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.75rem 1.5rem;
}
.election-your-vote-position h3 {
    margin: 0 0 0.25rem;
    padding: 0;
    font-size: 1rem;
    background: none;
}
.election-your-vote-position ol,
.election-your-vote-position ul {
    margin: 0;
    padding-left: 1.4rem;
}

/* Election page: your nominations */
.election-my-nominations {
    margin: 0 0 1.5rem;
}
.crm-container .election-my-nominations-title {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: left;
}
.election-my-nomination-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.election-my-nomination {
    padding: 0.75rem 1rem;
    border: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--election-radius, 4px);
}
.election-my-nomination-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}
.election-chip {
    padding: 0.1rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.85em;
}
.election-chip-respond {
    font-weight: 600;
}
.election-my-nomination-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}
/* The quiet button: the same shape, outlined, for the choice that gives something up. */
.crm-container .election-btn.election-btn.election-btn-quiet {
    background: transparent;
    color: var(--election-btn-bg);
}
.crm-container .election-btn.election-btn.election-btn-quiet:hover,
.crm-container .election-btn.election-btn.election-btn-quiet:focus-visible {
    background: color-mix(in srgb, var(--election-btn-bg) 12%, transparent);
    color: var(--election-btn-bg);
}

/* Results */
.election-result-position {
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--election-border, rgba(0, 0, 0, 0.18));
}
.crm-container .election-winner-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.7rem;
    border: 1px solid var(--election-btn-bg, currentColor);
    border-radius: 999px;
    background: var(--election-btn-bg, #333);
    color: var(--election-btn-color, #fff);
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
}
@supports (color: lch(from red l c h)) {
    .crm-container .election-winner-badge {
        color: lch(from var(--election-btn-bg) clamp(0, (49.5 - l) * 1000, 100) 0 0);
    }
}
.crm-container .election-winner-badge.election-winner-badge-tie {
    background: transparent;
    color: var(--election-btn-bg, #333);
    font-weight: normal;
}

/* Printing: the content only, kept together, no buttons */
@media print {
    .crm-container .election-btn,
    .election-review-dialog,
    .election-stepper-note a,
    .election-card-timezone {
        display: none !important;
    }
    .election-card,
    .election-my-nomination,
    .election-result-position,
    .crm-election-nominated-block,
    .election-step {
        break-inside: avoid;
    }
    .crm-election-nominated-block img,
    .candidate-details-left-block img {
        width: 3cm;
    }
    .election-next-action,
    .election-your-vote,
    .election-card {
        border-color: #000;
    }
}

/* Links inside a sentence must be told apart from the text round them without relying on colour. */
.crm-container .election-stepper-note a,
.crm-container .election-card-line a,
.crm-container .election-next-message a {
    text-decoration: underline;
}

/* Front end pages (election list, election page, candidate page, results, error pages): the Back to the election
   link, the one line about the time zone, the stage and status words, and the welcome line. */
.crm-container .election-back {
    margin: 0 0 1rem;
}
.election-timezone-note {
    margin: 0 0 1rem;
    font-size: 0.85em;
}
.crm-container .welcome-message .msg-text {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    text-align: left;
}
.election-card-inactive {
    --election-card-accent: var(--election-border, rgba(0, 0, 0, 0.4));
}
.election-badge-inactive,
.election-chip-withdrawn {
    border-style: dashed;
}
.election-chip-accepted {
    font-weight: 600;
}
.crm-container .election-error-actions,
.crm-container .election-results-links,
.crm-container .election-candidate-actions {
    margin: 1rem 0;
}
@media print {
    .crm-container .election-back,
    .crm-container .election-error-actions {
        display: none !important;
    }
}

/* Write-ins on the ballot */
.crm-container .election-writein {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem 1rem;
    border: 1px dashed currentColor;
    border-radius: 0.5rem;
}
.crm-container .election-writein legend {
    padding: 0 0.4rem;
    font-weight: 600;
    width: auto;
    border: 0;
}
.crm-container .election-writein-note {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}
.crm-container .election-writein-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: end;
    margin: 0 0 0.75rem;
}
.crm-container .election-writein-row[hidden],
.crm-container .election-writein-add[hidden] {
    display: none;
}
.crm-container .election-writein-person {
    flex: 1 1 16rem;
}
.crm-container .election-writein-person label,
.crm-container .election-writein-rank label {
    display: block;
    margin: 0 0 0.2rem;
}
.crm-container .election-writein-person .select2-container {
    width: 100%;
}
.crm-container .election-writein-rank {
    flex: 0 0 9rem;
}

/* Referendum questions on the ballot */
.crm-container .election-question-fieldset {
    margin: 1rem 0;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
}
.crm-container .election-question-fieldset legend {
    padding: 0 0.4rem;
    width: auto;
    border: 0;
    font-weight: 600;
}
.crm-container .election-question-resolution {
    margin: 0 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid currentColor;
}
.crm-container .election-question-choices .crm-form-radio,
.crm-container .election-question-choices label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1.25rem;
}
.crm-container .election-winner-badge.election-winner-badge-fail {
    background: transparent;
    color: inherit;
    border: 2px solid currentColor;
}
.crm-container .election-question-outcome {
    margin: 0.5rem 0 1rem;
}

/* Quick set-up of the dates */
.crm-container .election-quick-setup {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
}
.crm-container .election-quick-setup legend {
    padding: 0 0.4rem;
    width: auto;
    border: 0;
    font-weight: 600;
}
.crm-container .election-quick-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0.5rem 0;
}
.crm-container .election-quick-field {
    min-width: 12rem;
}
.crm-container .election-quick-status {
    margin-left: 0.75rem;
}

/* Results page: logo, header text, footer text and the celebration */
.crm-container .election-results-header {
    margin: 0 0 1.25rem;
    text-align: center;
}
.crm-container .election-results-logo {
    display: block;
    margin: 0 auto 0.5rem;
    max-height: 120px;
    max-width: 100%;
    height: auto;
    width: auto;
}
.crm-container .election-results-header-text {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
}
.crm-container .election-results-footer {
    margin: 1.5rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid currentColor;
    text-align: center;
}
.crm-container .election-results-logo-current {
    max-height: 120px;
    max-width: 100%;
    margin-bottom: 0.5rem;
}
.election-celebration-banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 2px solid currentColor;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
}
.election-celebration-skip {
    padding: 0.5rem 0.9rem;
    border: 2px solid currentColor;
    border-radius: 0.5rem;
    background: Canvas;
    color: CanvasText;
    font: inherit;
    cursor: pointer;
}

/* The frame of a back end page: the heading's small label, the row of action buttons and the quiet back buttons. */
.election-overview-kicker {
    display: block;
    font-size: 0.5em;
    font-weight: normal;
    text-transform: none;
    opacity: 0.75;
}
.election-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 1em 0;
}
.election-action-bar .button,
.crm-submit-buttons .election-back,
.crm-submit-buttons .election-back-manage {
    margin: 0;
}
.crm-container a.button.election-action-quiet,
.crm-container a.button.election-action-quiet:visited {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}
.crm-container .button.election-action-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Back end lists (the SearchKit pages): the action bar, the filters, the table and its card layout on a phone. */
.election-list-actions .election-action-end {
    margin-left: auto;
}
.crm-container .election-list-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
}
.crm-container .election-list-actions a.btn.election-action-quiet,
.crm-container .election-list-actions a.btn.election-action-quiet:visited {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}
.crm-container .election-list-actions .btn.election-action-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.crm-container .election-clear-filters {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.election-time-zone-note {
    margin: 0.5em 0;
}
.election-list-table table {
    width: 100%;
}
.election-list-table td[data-field-name="lock_reason"] {
    font-size: 0.9em;
}
.election-list-table .election-move-buttons {
    display: inline-flex;
    gap: 0.25em;
    margin-left: 0.5em;
    vertical-align: middle;
}
.election-list-table .election-move:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
@media (max-width: 768px), (pointer: coarse) {
    .crm-container .election-list-actions .btn,
    .election-list-table td .btn {
        min-height: 44px;
        min-width: 44px;
    }
}
@media (max-width: 600px) {
    .election-list-table table,
    .election-list-table tbody,
    .election-list-table tbody tr,
    .election-list-table tbody td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    /* The headings stay for screen readers; each cell shows its own label instead. */
    .election-list-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .election-list-table tbody tr {
        margin: 0 0 1em;
        padding: 0.5em;
        border: 1px solid rgba(128, 128, 128, 0.5);
        border-radius: 4px;
    }
    .election-list-table tbody td {
        padding: 0.25em 0.5em;
        border: 0;
        text-align: left;
        overflow-wrap: anywhere;
    }
    .election-list-table tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 0.85em;
        font-weight: 600;
        opacity: 0.8;
    }
    .election-list-table tbody td.election-cell-empty {
        display: none;
    }
    .election-list-table tbody td.crm-search-col-type-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }
    .crm-container .election-list-actions .election-action-end {
        margin-left: 0;
    }
}
.election-fingerprint {
    display: inline-block;
    max-width: 100%;
    padding: 0.25em 0.5em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
    word-break: break-all;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    user-select: all;
}
.election-fingerprint-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

/* Back end forms and dialogs (UI standards 3.5, 3.6, 9.2): group headings in order, the secondary button, the danger
   button and the time zone line. */
.crm-container .crm-election-form-block-container h2.election-form-group-heading,
.crm-container .crm-election-overview h2 {
    margin: 1.25rem 0 0.25rem;
    font-size: 1.17em;
}
.crm-container .election-timezone-note {
    margin: 0.5rem 0;
}
/* A button that is not the one primary action of the form (Fill in the dates, Preview): outlined, in the same
   shape and colour as the primary one. */
.crm-container .crm-election-form-block-container button.election-secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--election-btn-bg);
    border-radius: var(--election-radius, 4px);
    background: transparent;
    color: var(--election-btn-bg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.crm-container .crm-election-form-block-container button.election-secondary-button:hover,
.crm-container .crm-election-form-block-container button.election-secondary-button:focus-visible {
    background: var(--election-btn-bg);
    color: var(--election-btn-color);
}
.crm-container .crm-election-form-block-container button.election-secondary-button:focus-visible {
    outline: 3px solid var(--election-btn-bg);
    outline-offset: 3px;
}
/* Delete and Deactivate: the danger colour, on the form and in the dialog's own button row. */
.crm-container .crm-election-form-block-container button.crm-button.crm-button.election-danger,
.crm-container .crm-election-form-block-container button.crm-button.crm-button.election-danger:hover,
.crm-container .crm-election-form-block-container button.crm-button.crm-button.election-danger:focus-visible,
.crm-container .ui-dialog-buttonpane .ui-button:has(.fa-trash),
.crm-container .ui-dialog-buttonpane .ui-button:has(.fa-toggle-off) {
    border-color: #b3261e;
    background: #b3261e;
    color: #fff;
}
.crm-container .ui-dialog-buttonpane .ui-button:has(.fa-trash) .ui-icon,
.crm-container .ui-dialog-buttonpane .ui-button:has(.fa-toggle-off) .ui-icon {
    color: #fff;
}

/* Front end forms and ballot: Back to the election, the answer buttons, the position headings (frontforms) */
.crm-container .election-back-to-election {
    margin: 0 0 1rem;
}
.crm-container .crm-submit-buttons .election-back-to-election {
    margin: 0;
}
.crm-election-form-col-right.election-answer-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.crm-election-form-col-right.election-answer-buttons .crm-button,
.crm-election-form-col-right.election-answer-buttons .election-btn {
    margin: 0;
}
.crm-container .election-position-prompt {
    margin: 0 0 0.75rem;
    font-size: 1.15em;
    line-height: 1.3;
}
.crm-container .election-static-label {
    font-weight: 600;
}

/* The copy button next to the fingerprint keeps its icon and its word on one line. */
.crm-container button.election-copy {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.4;
}
.crm-container button.election-copy > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
/* Long statements and links wrap inside the Candidates list instead of pushing the row buttons off the page. */
.election-list-table td {
    overflow-wrap: break-word;
}
.election-list-table td[data-field-name="statement_url"] {
    overflow-wrap: anywhere;
    max-width: 14em;
}

/*
 * The four kinds of message of the standards (error, warning, success, information) look the same in every
 * CiviCRM theme. CiviCRM itself only styles some of the class names, so the extension's messages state their own
 * colours (all pass 4.5:1) and the kind is never the colour alone: the words say it.
 */
.crm-container .messages.error {
    background: #fbe3e4;
    color: #8a1f11;
    border-left: 4px solid #8a1f11;
    padding: 0.6em 1em;
}
.crm-container .messages.warning {
    background: #fff3cd;
    color: #5c4400;
    border-left: 4px solid #8a6500;
    padding: 0.6em 1em;
}
.crm-container .messages.success {
    background: #f1f8eb;
    color: #2d4a12;
    border-left: 4px solid #4b7f1d;
    padding: 0.6em 1em;
}

/* The lists fit the page: tighter cells, text at the top of the cell, and the row buttons share one width. */
.election-list-table td {
    vertical-align: top;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

/*
 * One size for every action button: Submit, Back, Back to Manage Elections and the buttons of the action rows.
 * Only back end forms (those whose footer has the Back button) and the action rows: the front end forms keep their own
 * buttons, which are sized for touch.
 * CiviCRM's own submit button, its link buttons and SearchKit's Bootstrap buttons each have their own size, so
 * they are all set here to the same height, padding, type size and weight.
 */
.crm-container .crm-submit-buttons:has(.election-back) .crm-button,
.crm-container .crm-submit-buttons:has(.election-back) button.crm-form-submit,
.crm-container .crm-submit-buttons:has(.election-back) a.button,
.crm-container .election-action-bar a.button,
.crm-container .election-action-bar span.button,
.crm-container .election-action-bar a.btn,
.crm-container .election-action-bar button.button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* !important: CiviCRM sets the size of its own buttons with its own important rules. */
    /* The same fixed height for every button, whatever the theme gives its own buttons. */
    height: 2.5em !important;
    min-height: 2.5em !important;
    padding: 0 0.9em !important;
    border-width: 1px !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    border-radius: 4px;
    white-space: nowrap;
}
.crm-container .crm-submit-buttons:has(.election-back) .crm-button > span,
.crm-container .crm-submit-buttons:has(.election-back) a.button > span,
.crm-container .election-action-bar a.button > span,
.crm-container .election-action-bar span.button > span,
.crm-container .election-action-bar button.button > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
.crm-container .crm-submit-buttons:has(.election-back) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

/* The back buttons of the SearchKit lists (Bootstrap buttons) are quiet like the ones of the forms. */
.crm-container a.btn.election-action-quiet,
.crm-container a.btn.election-action-quiet:visited {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* The icon inside a button never makes the button taller (some themes stretch icons to the height of the button). */
.crm-container .crm-submit-buttons:has(.election-back) .crm-i,
.crm-container .election-action-bar .crm-i {
    height: auto !important;
    min-height: 0 !important;
    width: auto;
    line-height: 1;
    flex: 0 0 auto;
}