Template:Infobox election/styles.css

/* {{pp-template}} */
.ib-election {
	line-height: 1.5em;
	width: 32em !important;
}

.ib-election .infobox-data {
	text-align: center;
}

.ib-election .infobox-label {
	width: 5em;
	white-space: nowrap;
}

.ib-election .infobox-subheader {
	line-height: 130%;
}

.ib-election .infobox-header {
	font-weight: normal;
	color: white;
	background-color: var(--color-surface-3);
}

.ib-election {
	background-color: var(--color-surface-1);
	color: var(--color-base);
}

/* To avoid seeming biased on responsive skins - make sure all images are the
 * same width and displayed e.g. not hidden by a scrollable element
 * use !important for both of these to override any widths or heights provided by
 * templates, otherwise these will squish.
 */
@media ( max-width: 640px ) {
	body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .ib-election .notpageimage.noresize img {
		height: 80px !important;
    	width: auto !important;
	}
}

/* always light mode for the images */
@media screen {
	html.skin-theme-clientpref-night .ib-election .mw-file-description img {
		background-color: var(--color-surface-1);
        color:inherit;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .ib-election .mw-file-description img {
		background-color: var(--color-surface-1);
        color:inherit;
	}
}


/* Force the internal tables to divide their columns completely evenly */
.ib-election .infobox-full-data > table {
	width: 100% !important;
	table-layout: fixed; /* This forces equal column distribution */
}

/* Ensure the cells inside the candidate rows use all available space evenly */
.ib-election .infobox-full-data > table > tbody > tr > td {
	width: auto !important;
}