.grid-row {
  display: flex;
}

.ballot-cards {
  display: block;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  margin-top: 14px;
}

.ballot-cards .ballot-wrapper {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 10px;
}

.ballot-cards .ballot-wrapper .ballot-container {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
}

.ballot-cards .grid-row {
  flex-wrap: wrap;
  display: block;
}

.ballot-cards .grid-row.no-percentage {
  flex-wrap: nowrap;
}

.ballot-cards .winner {
  background: #e8e8e8;
  position: relative;
}

.ballot-cards .winner .ballot-info::before {
  content: '';
  position: absolute;
  top: 16%;
  left: 0;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-color: #1aa368;
  border-radius: 4px;
}

.ballot-cards .winner .ballot-info::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 4px;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid 0.9px #fff;
  border-width: 0 1px 1px 0;
}

.ballot-info {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  font-family: Work-Sans;
  font-size: 14px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.23px;
  text-align: left;
  color: #282828;
}

.ballot-votes {
  flex-basis: 100%;
  justify-content: center;
  font-size: 14px;
  color: #282828;
  font-weight: 800;
  line-height: .59px;
  letter-spacing: -.23px;
}

.no-percentage .ballot-votes {
  font-size: 20px;
}

.ballot-total-label,
.ballot-total-votes {
  flex-basis: 50%;
}

.ballot-total-votes {
  text-align: right;
}

.no-percentage .ballot-total-votes {
  text-align: left;
}

.ballot-percentage {
  justify-content: center;
  font-size: 14px;
  color: #282828;
  font-weight: 800;
  line-height: .59px;
  letter-spacing: -.23px;
  white-space: nowrap; /* Use white-space: nowrap instead of text-wrap */
}

@media (min-width: 767px) {

  .ballot-cards .winner .ballot-info::after {
    top: 17%;
  }

  .ballot-cards .winner .ballot-info::before {
    top: 20%;
  }

  .ballot-cards .grid-row {
    flex-wrap: nowrap;
  }

  .ballot-cards .ballot-wrapper {
      margin-bottom: 7px;
  }

  .ballot-cards .ballot-wrapper .ballot-container {
      flex-basis: 50%;
  }

  .ballot-info {
    font-size: 14px;
    line-height: 1.09;
    letter-spacing: -0.3px;
  }

  .ballot-votes {
    flex-basis: 75%;
    line-height: 1.12;
    letter-spacing: -0.43px;
  }

  .no-percentage .ballot-votes {
    font-size: 23px;
  }

  .grid-row.totals .ballot-total-label {
    flex-basis: 20%;
  }

  .ballot-percentage {
    line-height: 1.12;
    letter-spacing: -0.43px;
  }

  .ballot-total-label {
    flex-basis: 50%;
  }

  .ballot-total-votes {
    flex-basis: 50%;
    text-align: right;
  }
}


@media (min-width: 1399px) {
  .ballot-info {
    font-size: 16px;
    line-height: 1.16;
    letter-spacing: -0.37px;
  }

  .ballot-votes, .ballot-percentage {
    font-size: 16.9px;
    line-height: 1.14;
    letter-spacing: -0.53px;
  }

  .ballot-cards .ballot-wrapper {
    margin-bottom: 8px;
  }

  .ballot-cards {
    margin-top: 14px;
  }
}

@media (min-width: 1599px) {
  .ballot-info {
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.43px;
  }

  .ballot-cards .winner .ballot-info::before {
    top: 25%;
  }

  .ballot-cards .winner .ballot-info::after {
    top: 21%;
  }

  .ballot-votes, .ballot-percentage {
    font-size: 20px;
    letter-spacing: -0.63px;
  }
}


.widget {
  margin-bottom: 20px;
}

.race-title {
  color: #004fff;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
}

.isElectionSlider .separator, .isSingleCard .separator {
  display: none;
}

.tooltip {
  position: absolute;
  padding: 8px 10px;
  z-index: 9999;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: wrap;
  border-radius: 6px;
  background-color: #fff;
  border: solid 1px #dadada;
  box-shadow: 0 0 1px 0 rgba(23, 15, 73, 0.25);
  font-family: Work-Sans;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  color: #FE0000;
  width: 180px;
}


.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 77%;
  transform: translateX(-50%);
  width: 19px;
  height: 21px;
  background-color: #fff;
  border-right: 1.3px solid #dadada;
  border-bottom: 1.3px solid #dadada;
  border-radius: 0px 0px 6px 0px;
  transform: rotate(45deg);
  margin-top: -10px;
  z-index: -1;
}

.tooltip.universal, .tooltip.county {
  bottom: 103%;
  right: -15px;
  margin-bottom: 10px;
}

.universalSearch.disabled .autocomplete, .countySearch.disabled .typeahead-wrapper, .countySearch.disabled svg {
  opacity: 0.5;
}

.separator::before,
.separator::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #dadada;
}

.separator span {
  font-weight: 800;
  font-family: Work-Sans;
  font-size: 16px;
  color: #000;
  padding: 0 10px;
  white-space: nowrap;
}

.inputContainer {
  margin-bottom: 30px;
}

.universal:not(.isSingleCard) .race-title:hover, .universal:not(.isSingleCard) .ballot-title:hover {
  cursor: pointer;
}

.widget.race,
.widget.ballot {
  border: 1px solid #dadada;
  border-radius: 10px;
}

/* BEGIN: Collapsed styles */
.widget.collapsed .ballot-title {
  border-radius: 10px;
}
.widget.collapsed .ballot-cards,
.widget.collapsed .ballot-description,
.widget.collapsed .ballot-precincts-reporting {
  display: none;
}

.widget.collapsed .race-title {
  border-radius: 10px;
}
.widget.collapsed .race-cards,
.widget.collapsed .race-description,
.widget.collapsed .race-precincts-reporting {
  display: none;
}
/* END: Collapsed styles */

.race-image {
  padding: 10px;
}

.race-precincts-reporting,
.ballot-precincts-reporting {
    position: relative;
}

.race-precincts-reporting .grid-row,
.ballot-precincts-reporting .grid-row {
  align-items: center;
  flex-direction: column;
}

.race-precincts-reporting .grid-row > div:nth-child(1),
.ballot-precincts-reporting .grid-row > div:nth-child(1) {
  display: none;
}

/* .race-precincts-reporting .grid-row > div:nth-child(2) {
  flex-basis: 92%;
}

.ballot-precincts-reporting .grid-row > div:nth-child(2) {
  flex-basis: 80%;
} */

/* .race-precincts-reporting.no-percent-precincts .grid-row > div:nth-child(2),
.ballot-precincts-reporting.no-percent-precincts .grid-row > div:nth-child(2) {
  flex-basis: 100%;
} */

/* .race-precincts-reporting .grid-row > div:nth-child(3),
.ballot-precincts-reporting .grid-row > div:nth-child(3) {
  flex-basis: 10%;
} */

/* ie11 */
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, div .race-precincts-reporting .grid-row > div:nth-child(3){
    flex-basis: 6%;
  }

  *::-ms-backdrop, div .ballot-precincts-reporting .grid-row > div:nth-child(3) {
    flex-basis: 6%;
  }
}

.race-precincts-reporting,
.ballot-precincts-reporting { 
  padding-top: 30px;
  color: #282828;
  text-align: center;
  font-family: Work-Sans;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.63;
  letter-spacing: -0.63px;
}

.race-precincts-reporting-text,
.ballot-precincts-reporting-text {
  padding-top: 5px;
}

.race-votes-percentage,
.ballot-votes-percentage {
  display: block;
  align-items: center;
  padding: 0;
  text-align: left;
  line-height: 1;
}

.race-precincts-reporting progress,
.ballot-precincts-reporting progress,
.race-votes-percentage progress,
.ballot-votes-percentage progress {
  /* Reset the default appearance */
  -webkit-appearance: none; /* for Chrome/Safari/Opera */ /* for Firefox */
  appearance: none;
  width: 100%;
  border: none; /* for Firefox */
}

.race-precincts-reporting progress,
.ballot-precincts-reporting progress {
  width: 100%;
  height: 10px;
}

.race-votes-percentage progress,
.ballot-votes-percentage progress {
  width: 100%;
  height: 15px;
  margin-bottom: 0;
}

.no-percentage .race-votes-percentage progress,
.no-percentage .ballot-votes-percentage progress {
  width: 100%;
}

/* BEGIN: Chrome/Safari/Opera progress bar styling
   source: https://css-tricks.com/html5-progress-element/
*/
.race-votes-percentage progress[value]::-webkit-progress-bar,
.ballot-votes-percentage progress[value]::-webkit-progress-bar {
  background-color: #f1f2f2;
  border-radius: 10px;
}

.race-votes-percentage progress[value]::-webkit-progress-bar,
.ballot-votes-percentage progress[value]::-webkit-progress-bar {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.race-votes-percentage progress[value]::-webkit-progress-value,
.ballot-votes-percentage progress[value]::-webkit-progress-value {
  background-color: #333;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.race-votes-percentage progress.rep[value]::-webkit-progress-value {
  background-color: #e23834;
}

.race-votes-percentage progress.dem[value]::-webkit-progress-value {
  background-color: #01236a;
}

.race-votes-percentage progress.lib[value]::-webkit-progress-value {
  background-color: #f7b709;
}
/* END: Chrome/Safari/Opera progress bar styling */

/* BEGIN: Firefox progress bar styling
   source: https://css-tricks.com/html5-progress-element/
*/
.race-votes-percentage progress[value],
.ballot-votes-percentage progress[value] {
  border-radius: 10px;
}

.race-votes-percentage progress[value]::-moz-progress-bar,
.ballot-votes-percentage progress[value]::-moz-progress-bar {
  background-color: #333;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.race-votes-percentage progress::-moz-progress-bar,
.ballot-votes-percentage progress::-moz-progress-bar {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.race-votes-percentage progress.rep[value]::-moz-progress-bar {
  background-color: #e23834;
}

.race-votes-percentage progress.dem[value]::-moz-progress-bar {
  background-color: #01236a;
}

.race-votes-percentage progress.lib[value]::-moz-progress-bar {
  background-color: #f7b709;
}
/* END: Firefox progress bar styling */

/* BEGIN: IE 10+ progress bar styling
   source: https://css-tricks.com/html5-progress-element/
*/
/* .race-votes-percentage progress[value],
.ballot-votes-percentage progress[value] {
  color: #333;
} */

/* For MS Edge's default border:
   https://stackoverflow.com/questions/45376961/progress-bar-has-a-border-by-default-in-the-edge-browser */
.race-votes-percentage progress[value]::-ms-fill,
.ballot-votes-percentage progress[value]::-ms-fill {
  border-color: currentColor;
}

.race-votes-percentage progress.rep[value] {
  color: #e23834;
}

.race-votes-percentage progress.dem[value] {
  color: #01236a;
}

.race-votes-percentage progress.lib[value] {
  color: #f7b709;
}
/* END: IE 10+ progress bar styling */.

.race-precincts-reporting-percentage {
  display: flex;
  padding: 0 10px;
  color: #004fff;
  font-family: Work-Sans;
  font-size: 20.8px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.63px;
}


.progress-bar-and-percentage-container .progress-bar-percentage {
  position: absolute;
  right: 10px;
  top: 0;
  color: #004fff;
  font-size: 20.8px;
  line-height: 1.1;
  letter-spacing: -0.63px;
}

.progress-bar-and-percentage-container .progress-bar-with-percentage {
  width: 100%;
}

.progress-bar,
.progress-bar .bar {
  display: block;
  background: none;
}

.progress-bar .bar > div {
  display: block;
  float: left;
  background-color: #004fff !important;
}

.container .universal .widget.race .race-cards .grid-row:not(:last-child) .race-votes-percentage,
.ballot-cards .grid-row:first-child .ballot-votes-percentage {
  margin-bottom: 12px;
  margin-top: 0px;
}

@media (min-width: 767px) {

  .inputContainer {
    margin-bottom: 20px;
  }

  .race-image {
    padding: 10px 10px 5px 30px;
  }

  .race-votes-percentage progress,
  .ballot-votes-percentage progress {
    width: 100%;
    height: 30px;
  }

  .container .universal .widget.race .race-cards .grid-row:not(:last-child) .race-votes-percentage,
  .ballot-cards .grid-row:first-child .ballot-votes-percentage {
    margin-bottom: 13px;
    margin-top: 3px;
  }

  .race-precincts-reporting .grid-row > div:nth-child(1) {
    display: block;
    padding-left: 40px;
  }

  .progress-bar-and-percentage-container .race-precincts-reporting-percentage {
    font-size: 16px;
    top: 5px;
    right: 0;
    line-height: 0.98;
    letter-spacing: -0.43px;
  }

  .race-precincts-reporting-text,
  .ballot-precincts-reporting-text {
    font-size: 14px;
    line-height: 1.12;
    letter-spacing: -0.43px;
  }

  .ballot-precincts-reporting .grid-row > div:nth-child(1) {
    display: block;
    flex-basis: 5%;
  }

  .ballot-precincts-reporting .grid-row > div:nth-child(2) {
    display: block;
    flex-basis: 85%;
  }

  .race-precincts-reporting.no-percent-precincts .grid-row > div:nth-child(2) {
    flex-basis: 80%;
  }

  .ballot-precincts-reporting.no-percent-precincts .grid-row > div:nth-child(2) {
    flex-basis: 90%;
  }
}

.suggestions-container {
  overflow-y: hidden;
  padding-right: 30px;
  overflow-y: hidden;
  top: 80%;
  padding-right: 30px;
  box-shadow: 0 1px 18px 0 rgba(0, 0, 0, 0.12);
  position: absolute;
  background-color: #fff;
  padding-top: 38px;
  border-radius: 5px;
  min-height: 230px;
  z-index: 2;
  min-width: 85%;
  left: 50%;
  transform: translateX(-50%);
}

.suggestions-container .suggestions {
    font-family: Work-Sans;
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.92;
    letter-spacing: normal;
    color: #282828;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    width: calc(100% - 40px) !important;
    height: 220px;
    border-radius: .25rem;
    position: absolute;
    overflow: auto;
    z-index: 2;
    margin-top: -26px;
    border: none;
    left: 4%;
    overflow-x: hidden;
  }
  
  
  /* Suggestions container styles */
.suggestions-container .suggestions::-webkit-scrollbar-track {
  background-color: #ececec;
  border-radius: 11px;
}

.suggestions-container .suggestions::-webkit-scrollbar {
  width: 11px;
  border-radius: 11px;
}

.suggestions-container .suggestions::-webkit-scrollbar-thumb {
  background-color: #989898;
  border-radius: 11px;
  border: 1px solid #f1f1f1;
}

/* Suggestions list item hover effect */
.suggestions-container .suggestions li:hover {
  background-color: #eee;
}
  
  .suggestions-container .suggestions li {
    display: block;
    width: 100%;
    padding: 1px 15px;
    clear: both;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;

    &:hover {
      text-decoration: none;
      background-color: #eee;
    }
  }


/* extra - don't delete (the following only affects Chrome/Safari/Opera)

.ballot-precincts-reporting progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(
      -45deg,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    ),
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
    -webkit-linear-gradient(left, #003264, #ae0000);

  border-radius: 2px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
} */

/* .race-precincts-reporting progress[value]::-webkit-progress-value {
  border-radius: 10px;
  background: linear-gradient(
    to right,
    #e23834 30%,
    #01236a 40%,
    #f7b709 99%
  );
} */



/** Latest Styling Overrides ---2024---- **/

.universal .widget.race {
  font-family: Work-Sans;
  padding: 15px;
}

.universal .inputContainer .universalSearch input.autocomplete-input.user-typed,
.universal .inputContainer .countySearch input.form-control.user-typed {
  color: #282828;
}

.universal.isElectionSlider .widget,
.universal.isElectionSlider .ballot {
  border: medium none currentColor;
  border: initial;
  padding: 0;
  padding: initial;
}

.universal.isElectionSlider .widget,
.universal.isElectionSlider .ballot {
  border: medium none currentColor;
  border: initial;
  padding: 0;
  padding: initial;
}

.universal.isElectionSlider .widget .expand-icon {
 display: none;
}

.universal.isSingleCard .widget .expand-icon {
  display: none;
 }
 
.universal .widget.race.collapsed {
  background-color: #fff;
}

.universal .widget.race.expanded {
  background-color: #f9f9f9;
}

.universal .widget.race .grid-row.winner .race-name-container,
.grid-row.winner .ballot-info {
  padding-left: 16px;
}

.universal .widget.race .grid-row.winner .race-name-container .race-name {
  padding-left: 0;
}

.universal .widget.race .race-candidates {
  margin-top: 14px;
}

.universal .widget.race .race-candidates .race-name-container {
  display: flex;
  align-items: center;
}

.universal .widget.race .race-candidates .race-name {
  font-family: Work-Sans;
  font-size: 14px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.23px;
  color: #282828;
}

.universal .widget.race .race-candidates .race-party {
  color: #989898;
  font-size: 14px;
  font-family: Work-Sans;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.57;
  letter-spacing: -0.43px;
}

.universal .widget.race .race-candidates .race-votes,
.universal .widget.race .race-candidates .race-percentage {
  font-size: 14px;
  font-family: Work-Sans;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.59;
  letter-spacing: -0.23px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #282828;
  white-space: nowrap;
}

.universal .widget.race .race-candidates .latest-progressBar {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.universal .widget.race:not(.no-precincts) .race-cards .grid-row.totals {
  padding-bottom: 12px;
}

.universal .widget.race .race-cards .grid-row.totals {
  color: #1aa368;
  line-height: 0.93;
  letter-spacing: -0.44px;
  font-weight: 800;
  display: flex;
  padding: 0;
  font-family: Work-Sans;
  font-size: 17px;
  font-stretch: normal;
  font-style: normal;
}

.universal .widget.race .race-cards .grid-row.totals .race-total-incumbent {
  flex-basis: initial;
}

.universal .widget.race .race-cards .grid-row {
  display: inline;
  display: initial;
}

.universal .ballot-cards .winner {
  background-color: transparent;
  background-color: initial;
}

.universal .race-cards .winner {
  background-color: transparent;
  background-color: initial;
}

.universal .race-cards .winner progress {
  background-color: transparent;
  background-color: initial;
}

.universal .race-cards .loser {
  opacity: 1;
  opacity: initial;
}

.universal .grid-row.winner .ballot-votes-percentage progress::-webkit-progress-value {
  background-color: #1aa368 !important;
}

.universal .grid-row.loser .ballot-votes-percentage progress::-webkit-progress-value {
  background-color: #282828 !important;
} */

.universal .grid-row progress.rep::-webkit-progress-value {
  background-color: #e23834;
}

.universal .grid-row progress.dem::-webkit-progress-value {
  background-color: #01236a;
}

.universal .grid-row progress.lib::-webkit-progress-value {
  background-color: #f7b709;
}


.universal .ballot-votes-percentage progress {
  position: relative;
  height: 12px;
}

/* .universal .ballot-votes-percentage progress::before {
  content: '';
  position: absolute !important;
  top: 50% !important;
  height: .9px;
  left: 0 !important;
  width: 100% !important;
  background-color: #282828 !important;
  transform: translateY(-50%) !important;
} */



.universal .ballot-votes-percentage progress::-webkit-progress-bar {
  background-color: transparent !important;
}

.universal .ballot-votes-percentage progress::-webkit-progress-value {
  height: 100%;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.universal progress.progress-bar-with-percentage {
  position: relative;
  height: 12px;
  width: 100%;
}

/* .universal progress.progress-bar-with-percentage::before {
  content: '';
  position: absolute !important;
  top: 50% !important;
  height: .9px;
  left: 0 !important;
  width: 100% !important;
  background-color: #282828 !important;
  transform: translateY(-50%) !important;
} */

.universal .progress-wrapper {
  position: relative;
}

.universal .progress-wrapper::before {
  content: '';
  position: absolute !important;
  top: 56% !important;
  height: .9px;
  left: 0 !important;
  width: 100% !important;
  background-color: #282828 !important;
  transform: translateY(-50%) !important;
}

.universal progress.progress-bar-with-percentage::-webkit-progress-bar {
  background-color: transparent !important;
}

.universal progress.progress-bar-with-percentage::-webkit-progress-value {
  height: 100%;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.universal .inputContainer {
  display: flex;
  flex-direction: column;
}

.universal .inputContainer .countySearch,
.universal .inputContainer .universalSearch {
  position: relative;
}

.universal .inputContainer .universalSearch .search-icon,
.universal .inputContainer .countySearch .list-icon {
  position: absolute;
  z-index: 9;
  top: 26%;
  left: 20px;
}

.universal .inputContainer .universalSearch svg.search-icon {
  width: 20px;
  height: 20px;
  top: 29%;
}

.universal .inputContainer .countySearch svg.list-icon {
  top: 39%;
  width: 18px;
  height: 12px;
}

.universal .inputContainer .countySearch input[type="text"],
.universal .inputContainer .universalSearch input[type="text"] {
  padding-left: 47px;
  font-family: Work-Sans;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-transform: inherit;
  text-align: left;
  color: #929292;
  height: 48px;
  border-radius: 8px;
  background-color: #f9f9f9;
  border: solid 1px #dadada;
}

@media (min-width: 767px) {
  .universal .inputContainer {
    flex-direction: row;
  }

  .universal .inputContainer .countySearch,
  .universal .inputContainer .universalSearch {
    width: 100%;
  }
}



@media (min-width: 767px) {
  .container .universal .race-precincts-reporting-text,
  .container .universal .ballot-precincts-reporting-text {
    padding-top: 7px;
  }

  .container .universal .widget.race .race-candidates .grid-row.winner .race-info {
    padding-left: 5px;
  }

  .universal .inputContainer .universalSearch svg.search-icon {
    top: 28%;
    left: 25px;
  }

  .container .universal .inputContainer {
    grid-gap: 8px;
    margin-bottom: 20px;
  }

  .separator::before, .separator::after {
    width: 8px;
  }

  .universal .inputContainer .countySearch svg.list-icon {
    left: 25px;
    top: 37%;
  }

  .container .universal .inputContainer .universalSearch input[type="text"],
  .container .universal .inputContainer .countySearch input[type="text"] {
    font-size: 14px;
    padding-left: 50px;
  }

  .container .universal .inputContainer .countySearch .rbt-input-main.form-control.rbt-input {
    padding-top: 22px;
  }

  .container .universal .widget.race {
    padding: 13px 21px;
  }

  .container .universal.isElectionSlider .widget.race {
    padding: 0;
    padding: initial;
  }

  .container .universal .widget.race:not(.no-precincts) .race-cards .grid-row.totals {
    padding-bottom: 10px;
  }

  .container .universal .widget.race .race-cards .grid-row.totals {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    line-height: 0.98;
    letter-spacing: -0.43px;
  }

  .container .universal .widget.race .race-candidates .race-info {
    line-height: 0.97;
    letter-spacing: -0.43px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-name {
    line-height: 1.09;
    letter-spacing: -0.3px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-party {
    font-size: 11px;
    line-height: 1.38;
    letter-spacing: -0.3px;
  }

  .container .universal .widget.race .race-candidates .race-votes,
  .container .universal .widget.race .race-candidates .race-percentage {
    font-size: 14px;
    line-height: 1.12;
    letter-spacing: -0.43px;
  }

  .container .universal .race-total-incumbenet {
    flex-basis: initial;
  }

  .universal .widget.race .race-candidates {
    margin-top: 10px;
  }
}

@media (min-width: 1199px) {

  .inputContainer {
    margin-bottom: 30px;
  }
}


@media (min-width: 1399px) {

  .inputContainer {
    margin-bottom: 35px;
  }

  .container .universal .widget.race {
    padding: 17px 26px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-name {
    font-size: 16.9px;
    line-height: 1.1;
    letter-spacing: -0.37px;
  }

  .container .universal .widget.race .race-candidates .race-votes, 
  .container .universal .widget.race .race-candidates .race-percentage {
    font-size: 16.9px;
    line-height: 1.14;
    letter-spacing: -0.53px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-party {
    font-size: 13.5px;
    line-height: 1.37;
    letter-spacing: -0.37px;
    margin-top: -4px;
  }

  .container .universal .race-precincts-reporting-text, 
  .container .universal .ballot-precincts-reporting-text {
    font-size: 15px;
    line-height: 1.28;
    letter-spacing: -0.53px;
  }

  .container .universal .widget.race .race-cards .grid-row.totals {
    font-size: 20px;
    line-height: 0.93;
    letter-spacing: -0.37px;
  }

  .progress-bar-and-percentage-container .race-precincts-reporting-percentage {
    font-size: 20px;
    line-height: 0.96;
    letter-spacing: -0.53px;
  }

  .container .universal .widget.race .race-cards .grid-row:not(:last-child) .race-votes-percentage, 
  .ballot-cards .grid-row:first-child .ballot-votes-percentage {
    margin-bottom: 15px;
    margin-top: 0px;
  }

  .container .universal .widget.race:not(.no-precincts) .race-cards .grid-row.totals {
    padding-bottom: 10px;
  }

  .universal .widget.race .race-candidates {
    margin-top: 12px;
  }
}

@media (min-width: 1599px) {

  .inputContainer {
    margin-bottom: 40px;
  }

  .container .universal .widget.race {
    padding: 20px 30px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-name {
    font-size: 20px;
    letter-spacing: -0.43px;
  }

  .container .universal .widget.race .race-candidates .race-info .race-party {
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: -0.43px;
  }

  .container .universal .widget.race .race-candidates .race-votes, 
  .container .universal .widget.race .race-candidates .race-percentage {
    font-size: 20px;
    line-height: 1.14;
    letter-spacing: -0.63px;
  }

  .container .universal .widget.race .race-cards .grid-row.totals {
    font-size: 22.8px;
    line-height: 0.97;
    letter-spacing: -0.43px;
  }

  .progress-bar-and-percentage-container .race-precincts-reporting-percentage {
    font-size: 24px;
    line-height: 0.95;
    letter-spacing: -0.63px;
  }

  .container .universal .race-precincts-reporting-text, 
  .container .universal .ballot-precincts-reporting-text {
    font-size: 18px;
    line-height: 1.26;
    letter-spacing: -0.63px;
  }

  .container .universal .widget.race .race-cards .grid-row:not(:last-child) .race-votes-percentage, 
  .ballot-cards .grid-row:first-child .ballot-votes-percentage {
    margin-bottom: 16px;
  }

  .container .universal .widget.race:not(.no-precincts) .race-cards .grid-row.totals {
    padding-bottom: 12px;
  }
}
.typeahead-wrapper {
    position: relative;
  }
  
  .form-control {
    width: 100%;
  }

  .typeahead-dropdown-container {
    overflow-y: hidden;
    top: 85%;
    padding-right: 30px;
    box-shadow: 0 1px 18px 0 rgba(0, 0, 0, 0.12);
    position: absolute;
    background-color: #fff;
    padding-top: 38px;
    border-radius: 5px;
    min-height: 230px;
    min-width: 85%;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }

  .typeahead-dropdown {
    font-family: Work-Sans;
    font-size: 13px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.92;
    letter-spacing: normal;
    color: #282828;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    width: calc(100% - 40px) !important;
    height: 220px;
    border-radius: .25rem;
    position: absolute;
    overflow: auto;
    z-index: 2;
    margin-top: -26px;
    border: none;
    left: 4%;
    overflow-x: hidden;
}

  
.typeahead-dropdown::-webkit-scrollbar-track {
  background-color: #ececec;
  border-radius: 11px;
}

.typeahead-dropdown::-webkit-scrollbar {
  width: 11px;
  border-radius: 11px;
}

.typeahead-dropdown::-webkit-scrollbar-thumb {
  background-color: #989898;
  border-radius: 11px;
  border: 1px solid #f1f1f1;
}

  .list-group-item {
    cursor: pointer;
    padding: 1px 20px;
  }
  
  .list-group-item:hover {
    background-color: #eee;
  }

  .list-group-item .highlighted {
    background-color: #ececec;
  }
  
.grid-row {
  display: flex;
}

.grid-row.totals {
  color: #1aa368;
  display: flex;
  justify-content: space-between;
  font-family: Work-Sans;
  font-size: 17px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.93;
  letter-spacing: -0.44px;
}

.widget.race:not(.no-precincts) .grid-row.totals {
  padding-bottom: 12px;
}

.race-cards {
  display: block;
  margin-bottom: 0;
  padding: 0;
  position: relative;
}

.race-cards .grid-row {
  flex-wrap: wrap;
}

/* .race-cards > div {
  border-bottom: 1px solid #ccc;
} */

.no-precincts .race-cards > div:last-child {
  border-bottom: none;
}

/*
  If ".race-total-image" needs the same treatment as below,
  we could apply it directly to ".race-cards figure" & ".race-cards img"
*/
.race-cards .race-image figure {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.race-cards .race-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.race-cards .race-total-image img {
  width: 0;
  height: 1px;
}

.race-incumbent {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.grid-row.winner .race-name {
  padding-left: 18px;
}

.grid-row.winner .race-name:before {
  content: '';
  position: absolute;
  top: 10%;
  left: 0;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background-color: #1aa368;
  border-radius: 4px;
}

.grid-row.winner .race-name::after {
  content: '';
  position: absolute;
  top: 9%;
  left: 4px;
  transform: translateY(-50%) rotate(45deg);
  width: 4px;
  height: 7px;
  border: solid 0.9px #fff;
  border-width: 0 1px 1px 0;
}

.has-incumbent .grid-row.winner .race-name.incumbent::before {
  top: 12%;
}

.has-incumbent .grid-row.winner .race-name.incumbent::after {
  top: 11%;
}

.race-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 23px;
}

.no-image .race-info {
  flex-basis: 100%;
}

.race-votes {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-content: center;
}

.no-image .race-votes {
  flex-basis: 100%;
}

.no-percentage .race-votes {
  font-size: 20px;
}

.race-cards .winner {
  background: #e8e8e8;
  position: relative;
}

.race-cards .winner progress{
  background-color: #f2f2f2;
}

/* .race-cards .winner:before {
  content: '';
  background-image: url(../images/icon-winner.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  position: absolute;
  top: calc(100% / 2 - 10px);
  width: 20px;
  height: 20px;
  margin-left: -18px;
} */

.race-cards .loser {
 opacity: .5;
}

.race-cards .view-all-toggle {
  justify-content: space-around;
  padding: 20px;
}

.race-cards .view-all-toggle button {
  border: 1px solid #fff;
  width: 100%;
  background-color: #e8e8e8;
}

.race-total-label {
  flex-basis: 50%;
}

.race-votes,
.race-percentage {
  justify-content: center;
  padding-bottom: 5px;
  color: #313132;
  font-size: 16px;
  font-weight: 500;
}

.race-cards > div.no-votes {
  display: none;
}

.grid-row.totals {
  margin-top: 14px;
}

@media (min-width: 767px) {

  .grid-row.totals {
    font-size: 16px;
    line-height: 0.95;
    letter-spacing: -0.3px;
  }

  .widget.race:not(.no-precincts) .grid-row.totals {
    padding-bottom: 10px;
  }

  .race-cards .grid-row {
    flex-wrap: nowrap;
  }

  .race-cards .grid-row .race-name::before {
      top: 17%;
      left: 4px;
  }
  
  .race-cards .grid-row .race-name::after {
      top: 14%;
      left: 9px;
      width: 4px;
      height: 8px;
  }

  .has-incumbent .grid-row.winner .race-name.incumbent::before {
    top: 15%;
  }

  .has-incumbent .grid-row.winner .race-name.incumbent::after {
    top: 12%;
  }
  
  .race-cards .winner:before {
    top: calc(100% / 2 - 15px);
    background-size: 30px;
    width: 30px;
    height: 30px;
    margin-left: -25px;
  }

  .race-cards .view-all-toggle button {
    width: 300px;
  }

  .race-image {
    flex-basis: 10%;
  }

  .race-incumbent {
    display: flex;
    flex-basis: 12px;
  }

  .race-info {
    display: flex;
    flex-basis: 30%;
  }

  .no-image .race-info {
    flex-basis: 100%;
  }

  .race-cards .race-image figure {
    width: 100px;
    height: 100px;
  }

  .race-votes,
  .race-percentage {
    font-size: 18px;
    font-weight: 500;
  }

  .race-votes {
    flex-basis: 50%;
  }

  .no-image .race-votes {
    flex-basis: 50%;
  }

  .no-percentage .race-votes {
    font-size: 23px;
  }

  /* placeholders */
  .race-total-image {
    display: block;
    flex-basis: 10%;
    padding: 10px 10px 5px 30px;
  }

  .race-cards .race-total-image img {
    width: 100px;
  }

  .race-total-incumbent {
    display: block;
    flex-basis: 15px;
  }

  .has-incumbent .race-total-incumbent {
    flex-basis: 50px;
  }

  .race-total-label {
    flex-basis: 30%;
  }

  .no-image .race-total-label {
    flex-basis: 45%;
  }

  .no-image .race-total-votes {
    flex-basis: 50%;
    text-align: right;

  }
}

/* IE11 */
@media all and (min-width: 767px) and (-ms-high-contrast:none) {
  *::-ms-backdrop, div .race-image  {
    flex-basis: 18%;
  }
}

/* IE11 */
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, div .progress-bar-and-percentage-container .progress-bar-percentage  {
    position: static;
  }

  *::-ms-backdrop, div .progress-bar-and-percentage-container .progress-bar-with-percentage  {
    margin-right: 10px;
  }

  /* IE11 on WHIO */
  *::-ms-backdrop, .widget div.progress-bar  {
    width: 98%; box-shadow: none;
  }
}

@supports (-ms-ime-align:auto) {
  .widget div.progress-bar  { width: 100%; }
}


/* small fix for webviews to keep label and votes lined up */
@media (max-width: 767px) {
  .race-cards .grid-row {
    flex-wrap: nowrap;
  }

  .race-cards.show-images .grid-row {
    flex-wrap: wrap;
  }

  .race-cards.show-images .race-incumbent {
    flex-basis: 3%;
  }

  .race-incumbent {
    padding-right: 5px;
  }

  .has-incumbent .race-incumbent {
    flex-grow: 0;
  }

  .race-info, .race-votes {
    flex-grow: 1;
  }

  .race-cards.show-images .race-total-incumbent {
    flex-basis: 0;
  }

  .race-total-label {
    flex-basis: 50px;
    flex-grow: 0;
    text-align: left;
  }

  .race-total-votes {
    flex-basis: 60%;
    flex-grow: 1;
    text-align: right;
  }

  .race-total-incumbent {
    flex-basis: 5%;
  }

  /*.has-incumbent .race-total-incumbent {*/
  /*  flex-basis: 125px;*/
  /*}*/
}
@media (min-width: 1399px) {
  .grid-row.totals {
    font-size: 20px;
    line-height: 0.93;
    letter-spacing: -0.37px;
    margin-top: 17px;
  }

  .container .universal .race-precincts-reporting-text, 
  .container .universal .ballot-precincts-reporting-text {
    padding-top: 8.5px;
  } 

  .race-cards .grid-row .race-name::after {
    top: 17%;
  }

  .race-cards .grid-row .race-name::before {
    top: 19%;
  }
}

@media (min-width: 1599px) {
  .grid-row.totals {
    margin-top: 18px;
  }

  .container .universal .race-precincts-reporting-text, 
  .container .universal .ballot-precincts-reporting-text {
    padding-top: 10px;
  }

  .grid-row.totals {
    font-size: 22.8px;
    line-height: 0.97;
    letter-spacing: -0.43px;
  }

  .widget.race:not(.no-precincts) .grid-row.totals {
    padding-bottom: 12px;
  }

  .has-incumbent .grid-row.winner .race-name.incumbent::before {
    top: 18%;
  }

  .has-incumbent .grid-row.winner .race-name.incumbent::after {
    top: 16%;
  }

  .race-cards .grid-row .race-name::after {
    top: 19%;
  }

  .race-cards .grid-row .race-name::before {
    top: 22%;
  }
}
.widget.office {
  border: 2px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}

.widget.candidate {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 15px 5px;
}

.widget.candidate.loser {
  opacity: .3;
}

.widget.candidate.winner {
  position: relative;
}

/* .widget.candidate.winner:before {
  content: '';
  background-image: url(../images/icon-winner.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  position: absolute;
  top: 22px;
  width: 20px;
  height: 20px;
} */

/* Left side winner. */
.widget.candidate:first-child.winner:before {
  left: 0;
  margin-left: -18px;
}

/* Right side winner. */
.widget.candidate:nth-last-child(1).winner:before {
  right: 0;
  margin-right: -18px;
}

.grid-row {
  display: flex;
}

.candidate-cards .grid-row > div {
  flex-basis: 50%;
}

.office-total-label {
  padding: 0 15px;
  color: #ccc;
  font-size: 14px;
  text-align: right;
}

.office-total-votes {
  color: #fff;
  font-size: 20px;
}

/* .candidate-cards .grid-row > div:first-child {
  border-right: 1px solid #ccc;
} */

.office-precincts-reporting .grid div:nth-child(3),
.office-precincts-reporting .grid div:nth-child(4) {
  grid-column: span 2;
}

.office-precincts-reporting div.office-precincts-reporting-percentage {
  text-align: right;
}

.candidate-cards {
  margin-bottom: 0;
  padding-bottom: 0;
}

.candidate-name {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-height: 75px;
  margin-bottom: 10px;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 18px;
}

.candidate-name-incumbent {
  flex-basis: 20%;
}

/* IE11 */
@media all and (min-width: 767px) and (-ms-high-contrast:none) {
  *::-ms-backdrop, div.candidate-cards .candidate-name-incumbent  {
    flex-basis: 60px;
    position: relative;
    left: -10px;
  }
}

/* ie 11 */
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, div .race-image  {
    flex-basis: 18%;
  }

  /* IE11 on WHIO */
  *::-ms-backdrop, .widget div.progress-bar  {
    width: 98%;
    box-shadow: none;
  }
}

/* edge */
@supports (-ms-ime-align:auto) {
  .widget div.progress-bar  {
    width: 100%;
  }
}

.candidate-affiliation {
  margin-top: 0;
  color: #999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.candidate-total-votes {
  font-size: 20px;
  text-align: center;
}

/* https://blog.etleap.com/2017/04/10/svg-in-react/ */
/* https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 */
/* https://stackoverflow.com/questions/29442833/svg-image-inside-circle */

/* begin fix for ios webviews and svgs */
.svg-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
}

.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
/* end fix for ios webviews and svgs */

.progressBarCircular-bar {
  stroke-dashoffset: 24.5;
}
.progressBarCircular-bar.no-circle-stroke {
  stroke-width: 0;
}

.progressBarCircular-image {
  opacity: .7;
}

.chart-text {
  fill: #fff;
  font-size: 11px;
  transform: matrix(1, 0, 0, 1, -4.8, 42);
  font-family: Work-Sans;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.01;
  letter-spacing: -0.81px;
  -webkit-font-smoothing: antialiased;
}

.chart-text.show-percent-decimal {
  transform: matrix(1, 0, 0, 1, -10, 42);
}

.chart-text .chart-number.ie11 {
  display: none;
}

/* IE11 */
@media all and (-ms-high-contrast:none) {
  *::-ms-backdrop, svg .chart-text .chart-number.ie11 {
    display: block;
  }
  *::-ms-backdrop, svg .chart-text .chart-number {
    display: none;
  }
}

.office-precincts-reporting {
  flex-wrap: wrap;
  padding: 15px 10px;
  color: #282828;
  font-family: 'Work-Sans';
  font-size: 18px;
  position: relative;
  font-weight: 800;
  line-height: 1.63;
  letter-spacing: -0.63px;
}

.office-precincts-reporting .grid-row {
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

.office-precincts-reporting-numbers,
.office-precincts-reporting-percentage {
  flex-basis: 50%;
  text-align: center;
}

.office-precincts-reporting-percentage {
  font-size: 16px;
  font-weight: 800;
  text-align: right;
  position: absolute;
  right: 10px;
  top: -10px;
  color: #004fff;
  font-size: 20.8px;
  line-height: 1.1;
  letter-spacing: -0.63px;
}

.office-precincts-reporting-bar {
  flex-basis: 100%;
}
/*
   NOTE: -webkit-appearance, -webkit-progress-bar and -webkit-progress-value only work in Chrome/Safari/Opera
.office-precincts-reporting-bar progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  margin-bottom: 0;
}

.office-precincts-reporting-bar progress[value]::-webkit-progress-bar {
  background-color: #f1f2f2;
  border-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.office-precincts-reporting-bar progress[value]::-webkit-progress-value {
  border-radius: 10px;
  background-color: #333;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(
    to right,
    #e23834 30%,
    #01236a 40%,
    #f7b709 99%
  );
} */

/* BEGIN: Collapsed styles */
.widget.collapsed .office-title {
  border-radius: 10px;
}
.widget.collapsed .candidate-cards,
.widget.collapsed .office-precincts-reporting,
.widget.collapsed .office-description {
  display: none;
}
/* END: Collapsed styles */

@media (min-width: 767px) {
  .widget.candidate {
    padding: 20px 60px;
  }

  .widget.candidate.winner:before {
    top: 30px;
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }

  /* Left side winner. */
  .widget.candidate:first-child.winner:before {
    margin-left: -32px;
  }

  /* Right side winner. */
  .widget.candidate:nth-last-child(1).winner:before {
    margin-right: -32px;
  }

  .office-total-label {
    font-size: 20px;
    text-align: left;
  }

  .office-total-votes {
    font-size: 28px;
  }

  .candidate-name {
    margin-bottom: 5px;
    font-size: 25px;
  }

  .candidate-name-incumbent {
    flex-basis: 10%;
  }

  .candidate-affiliation {
    margin-top: 10px;
    font-size: 14px;
  }

  .candidate-total-votes {
    font-size: 28px;
    text-align: center;
  }

  .office-precincts-reporting-numbers {
   font-size: 18px;
  }

  .office-precincts-reporting-percentage {
    font-size: 30.8px;
    top: -20px;
  }
}


.progress-bar,
.progress-bar .bar {
  margin: 0;
  display: block;
  background: none;
}

.progress-bar .bar > div {
  display: block;
  height: 10px;
  float: left;
}

.progress-bar .bar > div:first-of-type {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.progress-bar .bar > div:last-of-type {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*
rem sizes:
40px = 2.5rem
30px = 1.875rem
25px = 1.5625rem
24px = 1.5rem
20px = 1.25rem
18px = 1.125rem
16px = 1rem
15px = .9375rem
14px = 0.875rem
13px = 0.8125rem
12px = 0.75rem
10px = 0.625rem
6px = 0.375rem
5px = 0.3125rem
4px = 0.25rem

1px = 0.0625rem */

html {
  box-sizing: border-box;
  height: 100%;
  color: #222;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

img {
  width: 100%;
  /* border: 1px solid #222; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.625rem;
  font-family: "Average", serif;
  font-weight: normal;
}

h2 {
  font-size: 3.75rem;
}

h3 {
  font-size: 1.5rem;
}

a,
a:not([href]):not([tabindex]) {
  transition: color 0.3s ease;
  text-decoration: none;
}

a:hover,
a:not([href]):not([tabindex]):hover {
  color: #666;
  text-decoration: none;
}

figure .filler {
  display: inline-block;
  position: relative;
  width: 100%;
  max-height: 100%;
  padding-bottom: 56%;
  overflow: hidden;
  background: #222;
}

figure .filler img {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
  width: auto;
  max-width: 102%;
  height: 102%;
  max-height: 102%;
  transform: translate(-50%, -25%);
  text-align: center;
}

figcaption {
  margin: 0.3125rem auto 0;
  color: #888;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1rem;
}

button {
  border-radius: 5px;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
}

.universal input.rbt-input-hint {
  display: none !important;
}

.headToHead .widget-title {
  background: transparent;
}

.headToHead .widget-title .grid-row {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.headToHead .widget-title .grid-row .title {
  font-family: Work-Sans;
  font-size: 17px;
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.44px;
  text-align: center;
  color: #282828;
  text-transform: capitalize;
}

.universal.isElectionSlider .widget-title .grid-row .title {
  display: none;
}

.universal.isSingleCard .widget-title .grid-row .title {
  display: none;
}

.headToHead .widget-title .date-stamp {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  font-family: Work-Sans;
  font-size: 10.6px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.29px;
  text-align: center;
  color: #444;
}

.headToHead .widget-title .date-stamp .date-stamp-label {
  color: inherit;
}

.headToHead .widget.office {
  border: medium none currentColor;
  border: initial;
  border-radius: 0;
  border-radius: initial;
  background: transparent;
  box-shadow: none;
  box-shadow: initial;
}

.headToHead .candidate-cards {
  padding: 0;
  padding: initial;
  margin-bottom: 20px;
}

.headToHead .candidate-total-votes {
  font-family: Work-Sans;
  font-size: 14.7px;
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -0.41px;
  text-align: center;
  color: #282828;
}

.headToHead .candidate-name {
  font-family: Work-Sans;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -0.51px;
  text-align: center;
  color: #282828;
  display: flex;
  justify-content: center;
  min-height: 0;
  min-height: initial;
}

.headToHead .candidate-name .candidate-name-incumbent {
  display: none;
}

.headToHead .candidate-name .candidate-affiliation {
  font-family: Work-Sans;
  font-size: 10.6px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.29px;
  text-align: left;
  color: #444;
  margin-top: 5px;
}

input[type="text"] {
  display: block;
  width: 100%;
  padding: 7px 20px;
  text-transform: capitalize;
  color: #929292;
  border-radius: 8px;
  font-family: Work-Sans;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 3px;
  border: solid 1px #dadada;
  background-color: #f9f9f9;
}

.race-title,
.ballot-title {
  color: #282828;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.race-title-name,
.ballot-title-name,
.office-title-name {
  font-family: Work-Sans;
  font-size: 17px;
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.44px;
  text-align: left;
  color: #000;
}

.office-title {
  font-family: Work-Sans;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.44px;
  text-align: center;
  color: #282828;
}

.expand-icon {
  width: 30px;
  padding-left: 5px;
  overflow: visible;
}

.race-description,
.ballot-description,
.office-description {
  font-family: Work-Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.43px;
  text-align: left;
  color: #282828;
  padding-top: 8px;
}

.widget-title {
  padding-bottom: 10px;
}

.widget-title .grid-row {
  display: contents;
}

.widget-title .grid-row .title {
  flex-basis: 50%;
}

.widget-title .grid-row.no-title .date-stamp {
  flex-grow: 1;
}

.title {
  font-family: Work-Sans, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #282828;
}

.headToHead .title {
  margin-bottom: 5px;
}

.date-stamp {
  font-family: Work-Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.43px;
  text-align: left;
  color: #282828;
}

.date-stamp > span {
  display: block;
}

.date-stamp-label {
  margin-bottom: 3px;
  color: #aac540;
  font-size: 12px;
  font-weight: 600;
}

@font-face {
  font-family: 'Work-Sans';
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
  src: url(https://election-center-widget.ajc.com/static/media/worksans.a0297787a1a192213b53.ttf)
    format('truetype');
}

.container {
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
}

.container svg.close-icon {
  position: absolute;
  top: 35%;
  right: 15px;
}

.container svg.close-icon:hover {
  cursor: pointer;
}

.search-description {
  padding: 0 0 20px;
  color: #999;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
}

.ec-widgets-error {
  padding: 20px 0;
}

/* Media Queries */
@media (min-width: 767px) {

  .headToHead .title {
    margin-bottom: 7px;
  }

  .expand-icon {
    width: 21px;
  }
  
  .headToHead .widget-title {
    padding: 1rem 1.5625rem;
  }

  .headToHead .widget-title .grid-row {
    display: flex;
    align-items: flex-start;
  }

  .headToHead .widget-title .grid-row .title {
    font-size: 16.7px;
    line-height: 1.01;
    letter-spacing: -0.46px;
  }

  .headToHead .widget-title .date-stamp {
    font-size: 10.8px;
    line-height: 1.21;
    letter-spacing: -0.36px;
    justify-content: flex-start;
  }

  .universal .widget-title .grid-row {
    justify-content: space-between;
    display: flex;
  }

  .headToHead .candidate-name {
    font-size: 22px;
    letter-spacing: -0.61px;
  }

  .headToHead .candidate-name .candidate-affiliation {
    font-size: 9.4px;
    line-height: 1.21;
    letter-spacing: -0.32px;
  }

  .headToHead .candidate-total-votes {
    font-size: 17.5px;
    letter-spacing: -0.49px;
  }

  input[type="text"] {
    padding: 20px;
    font-size: 28px;
  }

  .race-title-name,
  .ballot-title-name,
  .office-title-name {
    font-size: 16px;
    letter-spacing: -0.16px;
    line-height: normal;
    font-weight: 700;
  }

  .date-stamp-label {
    font-size: 18px;
  }

  .search-description {
    padding: 10px 70px 40px;
    font-size: 16px;
  }

  .race-title,
  .ballot-title {
    font-size: 28px;
    line-height: 1.32;
  }

  .race-description,
  .ballot-description,
  .office-description {
    padding-top: 10px;
    font-size: 12px;
    line-height: 0.9;
    letter-spacing: -0.3px;
  }
}

@media (min-width: 1199px) {
  .universal .inputContainer {
    grid-gap: 16px;
  }

  .headToHead .widget-title .grid-row .title {
    font-size: 20px;
    letter-spacing: -0.56px;
  }

  .headToHead .widget-title .date-stamp {
    font-size: 13
  }
}

@media (min-width: 1399px) {
  .race-title-name, .ballot-title-name, .office-title-name {
    font-size: 20px;
    line-height: normal;
    letter-spacing: -0.2px;
  }

  .race-description, .ballot-description, .office-description {
    font-size: 14px;
    line-height: 0.95;
    letter-spacing: -0.37px;
  }

  .expand-icon {
    width: 25px;
  }
}

@media (min-width: 1599px) {

  .race-title-name, .ballot-title-name, .office-title-name {
    font-size: 24px;
    letter-spacing: -0.24px;
  }

  .race-description, .ballot-description, .office-description {
    line-height: 1.12;
    letter-spacing: -0.43px;
    padding-top: 12px;
  }

  .expand-icon {
    width: 30px;
  }
}





/*# sourceMappingURL=main.css.map*/