/**
 * This is the base style sheet for ClearCount.
 *
 * Copyright 2012-2021 Clear Ballot Group all rights reserved
 *
 * History:
 *      2012-04-04 Initial version, Tim Halvorsen
 *      2019-04-02 Version 2.0.0
 *      2019-10-31 Version 2.1.0
 *      2020-12-15 Version 2.2.0, Tab Iredale, Christina Roberts
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * CSS variables
 */
:root {
    --normal-text-color: #333333;
    --link-text-color: #0063DC;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * General page setup
 */
body {
	/* Use sans-serif fonts, starting with the nicest-looking fonts. */
	font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
	/* Reset the font size to the web browser default. */
	font-size: 100%;
	/* Give more vertical space between lines of text, for added readability. */
	line-height: 120%;
}

@media screen {
/* Centering content horizontally does not work for tables.  Just give a small left/right margin to give some whitespace. */
body {
	margin-left: 20px;
	margin-right: 20px;
}

/* This class is wrapped around almost all webpage content. */
/* Right now, we like the content to expand to the width of the window, but max-width could be used here if desired. */
div.content {
	max-width: none;
}

}

/* Screen reader only class
 */
.sr-only {
    display: none;
}
/* Assign colors to voted, overvoted and undervoted adjudications.
*/
.voted {
    color: #00ff00 !important;
}
.overvoted {
    color: #ff0000 !important;
}
.undervoted {
    color: #b993ff !important;
}

/* Login web page settings.
*/
#login_page {
	margin-top: 3em;
}

#login_page #submit {
	margin-top: 2em;
}

#login_page img {
	margin-bottom: 1em;
}

.form-group {
    display: inline-block;
    margin-right: 1em;
}

/* Override focus color and style defined in other css files */
:focus,
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
a:focus,
.btn:focus,
button:focus,
.dropdown.b-dropdown .b-dropdown-form:focus {
    outline-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 2px rgba(102,175,233,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 2px rgba(102,175,233,0.6);
}

button, input, select, textarea {
    border-width: thin;
    border-style: solid;
}

input[type="file"] {
    border-style: initial;
}

/* Override any other CSS files (e.g. Bootstrap) that attempt to specify an explicit fixed width.  We want dynamic width. */
select, input {
	width: auto;
}
select.chosen-select {
	width: 200px;
}

/* Override any other CSS files (e.g. Bootstrap) that sets the margins for checkboxes */
.form-inline input[type="checkbox"] {
    margin: 4px;
}

/* Emphasize visual distinction of disabled <select> choices by changing color from gray to silver. */
option[disabled] {
    color: silver;
}

/* Override any other CSS files (e.g. Bootstrap) that attempt to specify max-width: 100% on "img" tags. */
/* This is fine on Firefox and IE, but the equivalent syntax on Chrome is "max-width: none" (100% causes Chrome to auto-shrink). */
img {
	max-width: none;
}

/* Override Bootstrap that prevents dropdown menus from being visible below tab-content boundary.  We want visible overflow for "Links" and "Actions" menus. */
div.tab-content {
	overflow: visible;
}

/* Classes for navigation bar at the very top of the page, common to all pages.
*/

/* Override Bootstrap color of navbar-inverse of #999999 and use white instead, so it stands out more than the default. */
.navbar-inverse .nav a.dropdown-toggle {
    color: #FFFFFF;
}

/* Override Bootstrap "dropdown-menu" class to use z-index with a higher value than webRemakeBallot (1050) z-index. */
ul.dropdown-menu {
    z-index: 2000;
}

/* This class is a slight variation of Bootstrap's .dropdown-menu, except that it works for a menu that uses a table. */
.dropdown-menu-as-table li > a {
    display: block;
    padding: 3px 30px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    color: #333333;
    white-space: nowrap;
}

/* Add spacing between the icon and the text following it on dropdown menus */
.dropdown-menu .icon > {
    padding-right: 4px;
}

/* These classes control the styling of the navbar dropdown menu table. */
.dropdown-menu-as-table table tr {
    vertical-align: top;
}

/* class "page_header" is the text at the very top of the page, common to all pages.
*/
.page_header_election_title {
	font-weight: bold;
	font-size: 120%;
	line-height: 120%;
	color: var(--normal-text-color);
}

.page_header_report_title {
	font-size: 175%;
	line-height: 120%;
	color: var(--normal-text-color);
}

/* Text for section headers (h1, etc) get a consistent color and size. */
h1, h2, h3, h4 {
	color: var(--normal-text-color);
}

/* Make top-tier table column headings enclosed in a box. */
.header3, .header2 {
	border: 1px solid #ddd;
}

/* Make table report title heading have no border, as other column headers do. */
.reporttitle {
	border: none;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.error {
    color: red;
}

.modal .message {
    font-size: 120%;
    margin-bottom: 10px;
}

/* webDash styles */

.webdash_SectionTitle {
    color: #4f81bd;
    font-size: 120%;
    text-align: left;
}
.webdash_SectionHeading {
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: #4f81bd;
    vertical-align: bottom;
}
.webdash_SectionTotal {
    border-top-style: solid;
    border-top-width: 1px;
}

/* webOverlay styles */

.overlay_table td {
    border: 1px solid red;
}

/* Styles applied to text in a tooltip balloon brought up by the jQuery.tooltip module */

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	/*opacity: 0.90;*/
}

#tooltip h4, #tooltip div {
	margin: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables cell formatting styles
 */
table.display {
	margin: 0;
	padding: 0;
	color: var(--normal-text-color);
	background-color: white;
}

table.display a {
	color: var(--link-text-color);
	text-decoration: none;
}

table.display a:hover {
	text-decoration: underline;
}

table.display td.group {
	background-color: #d1cfd0;
	border-bottom: 2px solid #A19B9E;
	border-top: 2px solid #A19B9E;
}

table.display.text-center th,
table.display.text-center td {
    text-align: center;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  DataTables controls
*/
.dataTables_wrapper {
	position: relative;
	clear: both;
	zoom: 1; /* Feeling sorry for IE */
}

.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}

.dataTables_info {
	line-height: 38px;	/* Make this control line up with other taller controls (filter, length), which have input boxes in them. */
}

.dataTables_paginate {
	line-height: 22px;
	float: right;
}

.dataTables_paginate a.paginate_active {
	/* Style when "flashing" button.  Turn off Bootstrap background-image, and change color to blue. */
	background-image: none;
	background-color: #99B3FF;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
	margin: 0 auto;
	clear: both;
	width: 100%;

	/* Note Firefox 3.5 and before have a bug with border-collapse
	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
	 * border-spacing: 0; is one possible option. Conditional-css.com is
	 * useful for this kind of thing
	 *
	 * Further note IE 6/7 has problems when calculating widths with border width.
	 * It subtracts one px relative to the other browsers from the first column, and
	 * adds one to the end...
	 *
	 * If you want that effect I'd suggest setting a border-top/left on th/td's and
	 * then filling in the gaps with other borders.
	 */
}

table.display thead th {
	font-weight: bold;
	cursor: pointer;
}

table.display thead th.header1 {
	padding: 3px 18px 3px 10px;
	border-bottom: 1px solid black;
}

table.display tfoot th {
	font-weight: bold;
}

table.display tfoot th.header1 {
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
}

table.display tr.heading2 td {
	border-bottom: 1px solid #aaa;
}

table.display td {
	padding: 3px 10px;
}

table.display td.center {
	text-align: center;
}

table.display tr.even.row_selected td {
	background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
	background-color: #9FAFD1;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
	background: url('../img/sort_asc.png') no-repeat center right;
}

.sorting_desc {
	background: url('../img/sort_desc.png') no-repeat center right;
}

.sorting {
	background: url('../img/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
	background: url('../img/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
	background: url('../img/sort_desc_disabled.png') no-repeat center right;
}

th:active {
	outline: none;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
tr.odd {
	background-color: #F9F9F9;
}

tr.even {
	background-color: white;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables class employed when table (dataset) is empty ("No data available in table").
 */
.dataTables_empty {
	text-align: center;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables background colors for cells in sorted columns
 */
tr.odd td.sorting_1 {
	background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
	background-color: #DADCFF;
}

tr.odd td.sorting_3 {
	background-color: #E0E2FF;
}

tr.even td.sorting_1 {
	background-color: #EAEBFF;
}

tr.even td.sorting_2 {
	background-color: #F2F3FF;
}

tr.even td.sorting_3 {
	background-color: #F9F9FF;
}


/* Inhibit display of various GUI controls during printing. */
@media print {
	/* Inhibit black navigation bar across top of all web pages. */
	.user_nav_bar {
		display: none;
	}
	/* Inhibit DataTable controls, e.g. filter (search), etc. */
	.dataTables_paginate, .dataTables_length, .dataTables_filter, #table1_filter_placeholder, .dt-buttons.btn-group {
		display: none;
	}
	/* Inhibit display of interactive columns during printing */
    .Column_Links {
        display: none;
	}
}

/* Override any other CSS files (e.g. Bootstrap) that attempt to specify extra stuff (e.g URLs) on page that do not appear on display.  We want it to look just like display. */
@media print {
	a[href]:after {
		content: "";
	}
	abbr[title]:after {
		content: "";
	}
}

/* Set font for DataTables buttons to match the pagination buttons. */
.dt-buttons .btn {
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
}

/* Bootstrap active, hover, and focus colors are all the same
   which makes selection of visible columns confusing.
   Use the same colors that we use on the top-level export buttons.
   */
.dt-button-collection.dropdown-menu>li>a:hover,.dt-button-collection.dropdown-menu>li>a:focus {
    color: rgb(0, 0, 0);
    text-decoration: none;
    background-color: rgb(235, 235, 235);
    background-image: none;
}

/* Override to ensure that the active item is highlighted */
.dt-button-collection.dropdown-menu>.active>a,.dt-button-collection.dropdown-menu>.active>a:hover,
.dt-button-collection.dropdown-menu>.active>a:focus {
    background-color: #0081c2;
    color: #ffffff
}

/* Add a little space around the DataTables controls. */
.table-row-space {
    margin-top: 5px;
    margin-bottom: 5px;
}