/* Modules - Elected Officials */
.electedOfficials { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.officialDirectory { width: calc(33.3% - 40px); background: #ECF7FA; margin: 10px; padding: 0 10px 20px; text-align: center; }
.officialDirectory a { text-decoration: none; }
.schoolDisclaimer { width: calc(100% - 20px); padding: 0 10px 10px; font-style: italic; }

@media screen and (max-width: 1000px) { 
    .officialDirectory { width: calc(50% - 40px); }
}

@media screen and (max-width: 700px) {
    .officialDirectory { width: calc(100% - 20px); padding: 0 10px 10px; }
}

/* Elections */
.electionYear h2 { margin: 1.5em 0 1em; }
.electionDetails { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ECF7FA; }
.electionDetails b, .precinct b.lead, .precinctAlt b.lead { display: block; font-size: 18px; padding: 0 0 5px; }
.electionInfo { float: left; width: 50%; }
.electionLinks { float: right; width: 50%; }
.electionLinks a { display: block; font-weight: 700; }
.precinct a, .precinctAlt a { font-weight: 700; }
.electionLinks a i, .precinct a i, .precinctAlt a i { text-decoration: none; margin-right: 5px; }
.electionTypeDescription { display: none; position: absolute; width: calc(50% - 20px); z-index: 100; background: #ECF7FA; border: 1px solid #0F1910; border-radius: 5px; padding: 10px; }
a.electionTypeInfo { cursor: pointer; }
a:hover.electionTypeInfo + div.electionTypeDescription { display: block; }
a.precinctInfoIcon { cursor: pointer; }
a:hover.precinctInfoIcon + div.precinctInfoDescription { display: block; }
.electionContent.contentPC { display: flex; flex-wrap: wrap; margin: 0 -7.5px; }

@media screen and (max-width: 1000px) { 
    .electionTypeDescription { width: calc(100% - 40px); }
}

/* Candidates */
.officeHeader, .officeRow { width: 100%; }
.officeParty { float: left; text-align: center; width: 40px; }
.officeParty.csElection { display:none; }
.officeCandidate { width: calc(100% - 140px); float: left; }
.officeCandidate.csElection { width: calc(100% - 180px); }
.officeDetail { width: 100px; float: left; text-align: right; }
.officeHeader { font-weight: 700; background: #EEE; }
.officeRow { padding: 2.5px 0; border-bottom: 1px dotted #EEE; }
.candidateList { width: 100%; max-width: 500px; }
.candidateList h3 { margin-bottom: 10px; }
.candidateList b { display: block; margin-top: 20px; }
.candidateList b .info { font-size: 12px; font-weight: 400; margin-bottom: -10px; }
.candidateList .asterisk { font-size: 12px; margin-top: -5px; }
.fad.fa-asterisk, .noParty { font-size: 12px; }
.showMore { width: 100%; background: #CCC; padding: 10px 0; text-align: center; margin: 10px 0 0; }
.showMore a { display: block; width: 100%; cursor: pointer; }

/* Elections - Detail Page */
.electionSection h2 { margin: 30px 0 0 !important; background: #ECF7FA; border-bottom: 2px solid #063C50; padding: 10px 43.75px 10px 10px; }
.electionSection h2 a { text-decoration: none; display: block; }

.electionPage h3 { margin: 1.5em 0; font-size: 20px; }
.electionResults h3 { margin: 2em 0 1.5em; }
.resultsLink, .resultsCount { width: calc((100% - 60px) / 2); margin: 10px; float: left; padding: 20px 5px; background: #ECF7FA; border-radius: 5px; text-align: center; font-weight: 700; }
.resultsLink.fullResults { width: calc(100% - 30px); }
.resultsLink a { text-decoration: none; display: block; }
.resultsLink a i { margin-left: 10px; }
.resultsLink:hover { background: #ECF7FA; }
.electionsBack { margin: 2em 0 0; text-align: center; }
#ballots:before { height: 80px; display: block; content: ''; margin-top: -80px; }
.electionGraph h3 { margin: 2em 0 1.5em; }
.graphCat, .electionGraph .graphCatS, .electionGraph .graphNum, .electionGraph .graphNumS { height: 30px; line-height: 30px; float: left; font-weight: 700; font-size: 12px; }
.graphCat { width: 160px; text-align: right; margin-right: 5px; }
.graphCatS { width: 115px; text-align: right; margin-right: 5px; font-weight: 700; }
.graphNum { width: 55px; text-align: left; margin-left: 5px; font-weight: 700; }
.graphGraph { width: calc(100% - 225px); height: 20px; margin: 5px 0; float: left; background: #ECF7FA; }
.graphGraphS { width: calc(100% - 180px); height: 20px; margin: 5px 0; float: left; background: #ECF7FA; }
.graphSpacing { margin: 10px 0; }

.homeElectionTurnout .registerToVote a { width: 150px; color: #FFF; padding: 10px; margin: 1.5em auto 0; display: block; background: #11437F; text-align: center; text-decoration: none; font-weight: 700; border-radius: 10px; }
.graphRow { display: flex; }
.graphFill { height: 20px; float: left; background: #0A6485; }
.graphMetric { height: 30px; margin: -5px 5px; line-height: 30px; float: left; font-weight: 700; }
.graphDivider { height: 10px; margin-bottom: 10px; border-bottom: 1px solid #ECF7FA; }
.graphHeader { margin: 2em 0 1em; font-size: 14px; }
.graphHeader h4 { margin: 0; font-size: 16px; }

/* Ballots */
.serviceDetail.elections input[type="text"], input[type="text"].searchElections, .listFilter input[type="text"], input.instantSearch[type="text"] { display: block; border: 2px solid #ECF7FA; width: 100%; padding: 5px; font-size: 18px; font-family: 'Lato', sans-serif; margin: 20px 0; border-radius: 5px; }
.listFilter input[type="text"] { margin-top: 0; }
.ballotRow { width: 100%; padding: .5em 0; border-bottom: 1px dotted #CCC; font-size: 14px; }
.ballotRow a { display: block; font-size: 16px; }
.ballotRow a i { text-decoration: none; margin-right: 5px; }


/* Modules - Election Maps */
.mapLinks { display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin: 0 -10px; }
.mapLinks h2 { width: calc(100% - 20px); margin: 30px 10px 10px; }
.mapLinks h2:first-child { margin-top: 0; }
.mapLinks.withFilters h2:first-child { margin-top: 30px !important; }
.mapLink { width: calc(33.333% - 44px); border: 2px solid #ECF7FA; float: left; margin: 10px; padding: 25px 10px 5px; min-height: 80px; background: #ECF7FA; border-radius: 5px; text-align: center; line-height: 1.4em; }
.mapLink a { text-decoration: none !important; display: block; }
.mapLink a i { display: block; font-size: 30px; line-height: 30px; margin-bottom: 10px; }
.mapLink:hover, .mapLink.right:hover { background: #FFF; }

/* Officials */
.boardList { margin: 10px 0 20px; }
.boardList h2 { padding: 5px 10px; margin: 1em 0 0; line-height: 1.5em; border-bottom: 2px solid #063C50; }
.boardList.servicePageList h2 { padding: 0px; margin: 1em 0 .25em !important; border-bottom: none; }
.boardList p { margin: 15px 10px; }
.offRow { width: calc(100% - 20px); padding: 5px 10px; border-bottom: 1px solid #ECF7FA; display: flex; }
span.townshipStatus { display: inline-block; margin-left: 10px; font-size: 18px; background: #ECF7FA; padding: 0 10px; line-height: 34px; }

.offPhoto { width: 100%; margin: 5px 0 0; }
.offInfo { width: 100%; }

.offInfo { width: 66.6%; float: left; padding: 1px 0; }
.offInfo4x { width: 75%; float: left; padding: 1px 0; }
.offTerm { width: 33.4%; float: right; text-align: right; position: relative; }
.offTerm4x { width: 25%; float: right; text-align: right; }
.offName { width: 50%; float: left; }
.offName.noContact { width: 100%; }
.offContact.collapse { width: 0; }
.committeeInfo { font-size: 12px; line-height: 15px; }
.offContact { width: 50%; float: right; text-align: center; }
.offContact a { }
.offContact a i { margin-right: 4px; }
.offContact4x { width: 33.3%; float: left; text-align: center; }
.offContactName { text-align: left; }
.offTopDivider { margin-top: 10px; border-top: 1px solid #0F1910; padding-top: 10px; }

.officialColumn { float: left; width: 25%; }
.officialColumn a i, .officialColumn3 a i, .fedColumn1 a i, .officialColumn3 i { margin: 0 3px; text-decoration: none; }
.officialRight a i { margin: 0; }
.officialColumn3 { float: left; width: 33.33%; padding: 1px 0; position: relative; }
.officialRow { margin-bottom: 5px; padding: 2px 10px; border-bottom: 1px solid #ECF7FA; width: calc(100% - 20px); }
.fedColumn1 { float: left; width: 33.33%; }
.fedColumn2 { float: left; width: calc(100% - 160px - (100% / 3)); }
.fedColumn3 { float: left; width: 160px; text-align: right; position: relative; }
.us_senate .officialInfo, .us_house_of_representatives .officialInfo { padding: 10px 10px 0; }

.cityContact { float: left; width: calc(50% - 10px); margin-left: 10px; }
.cityContact.numbers { text-align: right; margin-left: 0; margin-right: 10px; }
.cityContact.numbers a i { margin-left: 5px; text-decoration: none; }
.positionTitle { float: none; width: calc(100% - 20px); font-weight: 700; padding: 10px; text-transform: uppercase; }
.positionName { float: left; width: 33.33%; padding: 3px 0; border-bottom: 1px solid #ECF7FA; }
.positionEmail { float: left; width: 33.33%; text-align: center; padding: 3px 0; border-bottom: 1px solid #ECF7FA; }
.termEnds { float: left; width: 33.33%; text-align: right; padding: 3px 0; border-bottom: 1px solid #ECF7FA; }
.positionName.school { width: 30%; border-bottom: 0; }
.positionEmail.school { width: 40%; border-bottom: 0; }
.positionName.schoolA, .positionEmail.schoolA, .termEnds.schoolA { border-bottom: 0 !important; }
.termEnds.school { width: 30%; border-bottom: 0; }
.officialInfo .boardInfo { background: #ECF7FA; padding: 10px 0; }
.officialInfo .boardInfo p:first-child { margin-top: 0; }
.officialInfo .boardInfo p:last-child { margin-bottom: 0; }

.officialsCity { margin-top: 10px; border-top: 1px solid #0F1910; padding-top: 10px; }
.officialDetails .filterDiv, .filterDiv.detailList { }
.officialCenter { text-align: center; }
.officialRight { text-align: right; }
.officialBreak { clear: both; height: 20px; }
.officialParty { width: 22px; display: inline-block; border-radius: 50%; text-align: center; height: 22px; line-height: 22px; }
.officialPartyR { color: #C00; border: 1px #C00 solid; }
.officialPartyD { color: #00F; border: 1px #00F solid; }
.officialPartyAlt { width: 12px; display: inline-block; text-align: center; height: 16px; line-height: 17px; color: #FFF; }
.officialPartyAltR { background: #C00; }
.officialPartyAltD { background: #00F; }
.officialPartyAltI, .officialPartyAltO { background: #666; }
.officialPartyAltL { background: #FFDF00; color: #000; }

.cityDetails h2, .officialDetails h2, .filterDiv.detailList h2 { padding: 5px 10px; margin: 1em 0 0; line-height: 1.5em; border-bottom: 2px solid #063C50; }
.us_senate h2, .us_house_of_representatives h2 { margin-bottom: 10px; }
.officialContact { background: #ECF7FA; padding: 10px 0; margin: 0 0 10px; }
.officialDetails div:first-child h2 { margin-top: 0; }

.termLengthDescription { display: none; position: absolute; width: 175px; z-index: 100; background: #ECF7FA; border: 1px solid #0F1910; border-radius: 5px; padding: 4px; text-align: center; right: 0; font-size: 15px; line-height: 22px; }
.offRow.dedicatedPage .termLengthDescription { right: inherit; }
a.termLengthInfo { cursor: pointer; color: #0F1910; }
a:hover.termLengthInfo + div.termLengthDescription { display: block; }
.officialInfoDescription { display: none; position: absolute; width: 165px; z-index: 100; background: #ECF7FA; border: 1px solid #0F1910; border-radius: 5px; padding: 4px; text-align: center; }
a.officialInfoDescriptionInfo { cursor: pointer; }
a:hover.officialInfoDescriptionInfo + div.officialInfoDescription { display: block; }

@media screen and (max-width: 1150px) {
    .mapLink { width: calc(50% - 44px); }

    .offName { width: 100%; float: none; }
    .offContact { width: 100%; float: none; text-align: left; }
    .offContact.collapse { display: none; }
}

@media screen and (max-width: 1000px) {
    .mapLink { width: calc(100% - 44px); min-height: 0; padding: 15px 10px; }
  }

@media screen and (max-width: 865px) {
    .officialColumn, .officialColumn3, .fedColumn1, .fedColumn2, .fedColumn3, .offInfo, .offTerm, .offContact4x { width: 100%; text-align: left; }
    .fedColumn1, .fedColumn2 { margin-bottom: 1em !important; }
    .officialColumn.collapse, .officialColumn3.collapse { height: 0; }

    .offInfo, .offInfo4x { width: calc(100% - 150px); }
    .offTerm { width: 150px; text-align: right; }
}

@media screen and (max-width: 600px) {
    .offRow { font-size: 15px; line-height: 23px; }
    .offName { width: 100%; }
    .offContact { width: 100%; text-align: left; }
    .offInfo.noTerm { width: 100%; }
    .offTerm.noTerm { width: 0; }  
    .offInfo i { display: none; margin: 0; }
}