/*
Theme Name: BallotGuide
style.css
Version: 2.2
Author: Alan Berman
Description: Base Framework.
This file is in dev
Mod 5 Dec 2023
*/

/* --------------- */
/*      Reset      */
/* --------------- */

/* * {
  box-sizing: inherit;
} */

*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
  /* vertical-align: middle; if you use this, don't use display: block */
  font-style: italic;
  /* background-repeat: no-repeat;
  background-size: cover; See blog post from Powell's friend Harry */
  shape-margin: 0.75rem;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

button {
  font-size: 100%;
  /* For all browsers */
  line-height: 1.15;
  /* For all browsers */
  margin: 0;
  /* Firefox and Safari have margin */
  overflow: visible;
  /* Edge hides overflow */
  text-transform: none;
  /* Firefox inherits text-transform */
  -webkit-appearance: button;
  /* Safari otherwise prevents some styles */
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

button {
  border: 0.2rem;
  border-radius: var(--bradius);
  background: var(--midblue);
  color: #fff;
  font-family: -system-ui, sans-serif;
  font-size: 1rem;
  line-height: 0.8;
  white-space: nowrap;
  text-decoration: none;
  padding: 0;
  margin: 0;
  /*padding: 0.25rem 0.5rem;
margin: 0.25rem; */
  cursor: pointer;
}

.candidate details,
.judge details {
  margin-top: 1rem;
}

details summary {
  cursor: pointer;
}

details summary > * {
  display: inline;
}

.candidate__info {
  border: transparent;
  margin-bottom: 1.4rem;
}

.candidate__info details[open] summary::after,
.proposition__body details[open] summary::after,
.candidate__endorsers + details[open] summary::after {
  content: attr(data-open);
}

.candidate__info details:not([open]) summary::after,
.proposition__body details:not([open]) summary::after,
.candidate__endorsers + details:not([open]) summary::after {
  content: attr(data-close);
}

/* MASSIVE select reset from Filament group via CSS-Tricks */
select {
  display: block;
  font-family: sans-serif;
  font-weight: 500;
  color: #444;
  line-height: 1.3;
  /* padding: .6em 1.4em .5em .8em; */
  width: auto;
  max-width: 100%;
  /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  /* border-radius: .5em; */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    
  */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right 0.7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 0.65em auto, 100%;
}

/* Hide arrow icon in IE browsers */
.select::-ms-expand {
  display: none;
}

/* Hover style */
.select:hover {
  border-color: #888;
}

/* Focus style */
.select:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

/* Set options to normal weight */
.select option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

/* Disabled styles */
.select:disabled,
.select[aria-disabled="true"] {
  color: graytext;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.select:disabled:hover,
.select[aria-disabled="true"] {
  border-color: #aaa;
}

/* end select reset styling  */
/*****************************/

figure {
  margin-inline: 0;
}

figcaption {
  margin-top: 1rem;
}

.affiliates {
  margin-top: 2rem;
}

.affiliates img {
  /* width: 70%; */
  object-fit: contain;
  transform: scale(0.7);
}

.flow-content > * + * {
  /* Andy Bell via Kevin Powell suggestion to be able to restore space above */
  margin-top: 1rem;
}

html {
  color-scheme: dark light;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

:root {
  font-size: 16px;
  --space: 1rem;
  --space-xs: calc(var(--space) / 3);
  --space-sm: calc(var(--space) / 2);
  --space-md: calc(var(--space) * 2);
  --yellow: rgb(251, 175, 30);
  --softyellow: rgba(251, 175, 30, 0.8);
  --lightyellow: #fde4b5;
  --darkblue: #062265;
  --verydarkblue: #18225c;
  --midblue: #415696;
  /* replaced for AAA accessibility  --midblue: #516ab4; */
  --lightblue: #dce2ef;
  --lightgray: rgb(240, 240, 240);
  --medgray: rgb(220, 220, 220);
  --pink95: rgb(252, 239, 241);
  --bradius: 0.6rem;
  --triadicred: #b01053;
  --compgold: rgba(101, 72, 6, 0.3);
  --analopurple: rgba(176, 16, 147, 0.3);
  --compblue: rgba(30, 107, 251, 0.2);
}

/* --------------- */
/* Utility classes */
/* --------------- */

.flexify {
  display: flex;
  gap: var(--gap, 1rem);
}

.sr-only {
  /* Scott O'Hara via Kevin Powell */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.printCategory {
  display: none;
}

/* --------------- */
/*   Page classes  */
/* --------------- */

.page_entry {
  /* background: #fffaf7; */
}

.page_ballot {
}

.page_review {
}

.page_print {
}

.page_about {
}

.page_endorsers {
}

.page_contact {
}

.page_admin {
}

/* --------------- */
/*  loader classes */
/* --------------- */
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(100, 100, 100, 0.5);
}

.loader {
  /* border for first shape */
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 2s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
  z-index: 1001;
}

.loader:before {
  /* border for middle shape */
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

.loader:after {
  /* border for innermost shape */
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }

  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

.loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  /*
    width: 51%;
    height: 100%;
    background: #222;
    z-index: 1000;
    */
}

.loader-wrapper .loader-section.section-left {
  left: 0;
}

.loader-wrapper .loader-section.section-right {
  right: 0;
}

/* Loaded styles */
.loaded .loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(-100%);
  /* IE 9 */
  transform: translateX(-100%);
  /* Firefox 16+, IE 10+, Opera */
}

.loaded .loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: translateX(100%);
  /* IE 9 */
  transform: translateX(100%);
  /* Firefox 16+, IE 10+, Opera */
}

.loaded .loader {
  opacity: 0;
}

.loaded .loader-wrapper {
  visibility: hidden;
}

/* ------------------------ */
/* mobile styles up to 560px   */
/* ------------------------ */

body {
  text-align: left;
  color: var(--darkblue);
  margin: 0;
  background: #fff;
  line-height: 1.4;
}

body > header {
  position: sticky;
  top: 0;
  z-index: 20;
}

footer {
  z-index: 20;
  background: #fff;
  padding-inline: 1rem;
}

main.page_entry + footer {
  /* background: #fffaf7!important; */
}

.page-review footer,
.page-selection footer,
.page-state footer {
  border-top: 0.1rem solid var(--lightblue);
}

footer .copyright {
  display: block;
  margin-inline: auto;
  text-align: center;
  padding-block: 1rem;
}

dialog {
  border: 0.3rem solid var(--darkblue);
  border-radius: var(--bradius);
  margin-inline: 1rem;
  max-height: 80vh;
}

.page_entry footer > * {
  /* padding-block: 1rem; */
  text-align: center;
  margin-inline: auto;
}

/* .lang-choice {
  text-align: right;
  margin: 1rem 1rem 1rem auto;
  font-size: 0.9rem;
}

.lang-choice a {
  text-decoration: underline;
  color: var(--darkblue);
}

.lang-choice a:link {
  color: var(--darkblue);
}

.lang-choice a:visited {
  color: var(--darkblue);
}

.lang-choice a:hover {
  color: var(--midblue);
}

.lang-choice a:active {
  color: var(--darkblue);
} */

.page_entry figure {
  margin-block: 0;
}

.page_entry figcaption {
  text-align: center;
}

.page_entry article {
  display: grid;
  grid-template-areas:
    "articleArea1"
    "articleArea2";
}

.page_entry article.coverage {
  grid-template-areas:
    "articleArea0"
    "articleArea1"
    "articleArea3"
    "articleArea2";
}

.page_entry .coverage header {
  grid-area: articleArea0;
}

.page_entry .coverage p {
  text-align: center;
}

section.left {
  grid-area: articleArea1;
}

.page_entry .video figcaption {
  text-align: center;
}

.video section.left {
  grid-area: unset;
}

section.center {
  grid-area: introArea;
}

.video section.center {
  grid-area: unset;
}

.video section.center figure {
  margin-top: 0;
}

section.right {
  grid-area: articleArea2;
}

.steps {
  grid-area: articleArea1;
  /* margin-top: 1rem; */
  /* width: max-content; */
  margin-inline: auto;
}

section.address-form {
  grid-area: articleArea2;
}

.page-state article.sequence-and-form,
.page-selection article.sequence-and-form {
  border: none;
  padding-inline: 0;
}

.page-state .address-form {
  grid-area: unset;
}

.grouping {
  background: var(--lightgray);
  margin-bottom: 0;
  /* padding-top: 1rem; */
  /* padding-bottom: 3rem; */
  border: none;
}

.grouping:first-of-type {
  padding-bottom: 3rem;
}

.grouping:nth-of-type(2) {
  background: #fff;
  padding-block: 0;
  margin-bottom: 0;
}

.grouping:nth-of-type(3) {
  margin-top: 1rem;
  margin-bottom: 0;
}

.grouping:last-of-type {
  background: none;
}

article,
.filtered-out-message {
  margin-inline: 1rem;
}

.filtered-out-message {
  margin-block: 1rem;
}

h1 {
  font-size: 2rem;
  margin: 2rem 1rem 1rem 1rem;
  text-align: center;
  line-height: 1.1;
  /* text-wrap: balance; */
}

h1 span {
  display: block;
  font-size: 1.2rem;
}

.page_entry h1 {
  font-family: "Roboto", sans-serif;
  font-size: 2.5rem;
  margin-bottom: 0;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.page_entry .intro h2 {
  color: #fff;
}

.page_entry h1 span {
  font-size: 2.5rem;
  font-weight: 900;
  display: inline;
}

h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  text-align: center;
  /* text-wrap: balance; */
}

.page-selection h2,
.page-state h2 {
  text-align: left;
  margin-block: 0;
}

h3,
.page_entry h2,
.candidates-repub summary {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0;
  text-align: left;
  font-weight: 700;
}

.page_entry h2 {
  text-align: center;
  text-wrap: balance;
}

.page_entry .affiliates h2 {
  margin-top: 1rem;
}

.page_entry .participate h2 {
  margin-bottom: 1rem;
}

.page_entry .center figure img {
  margin-inline: auto;
}

.page_entry .intro h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  margin-top: 0.6rem;
  text-align: center;
  font-weight: 700;
}

article.donate h2 {
  margin-top: 0;
}

h4,
.candidate__info summary,
.proposition__body summary,
.judge summary {
  font-weight: 800;
  font-size: 0.8rem;
  margin-block-end: 0;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}

table {
  margin-inline: auto;
}

i.fa {
  vertical-align: baseline;
}

i.fa::before {
  line-height: 1;
}

caption {
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

th,
td {
  vertical-align: middle;
  padding-block: 0.2rem;
}

.coverage th img {
  width: 1rem;
  margin-right: 1rem;
}

.coverage th,
.coverage td {
  line-height: 1;
}

ul,
ol {
  text-align: left;
}

details ul {
  margin-block: 0;
  list-style-type: none;
  padding-left: 1rem;
}

/****************/
/* big numerals */
/****************/

.steps ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 5rem;
  padding-inline-start: 2rem;
  font-size: 1.4rem;
  margin-left: 0.5rem;
}

.steps ol li {
  margin: 0 0 1.2rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
  color: #fff;
}

.steps ol li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  position: absolute;
  top: -0.1rem;
  --size: 1.8rem;
  left: calc(-1 * var(--size) - 0.6rem);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  background: var(--verydarkblue);
  border-radius: 50%;
  text-align: center;
}

.steps span {
  font-weight: 600;
}

.primary-navigation a {
  color: #fff;
  text-decoration: none;
  z-index: 5;
}

.primary-navigation a:link {
  color: #fff;
  text-decoration: none;
}

.primary-navigation a:visited {
  color: #fff;
  text-decoration: none;
}

.primary-navigation a:hover {
  /* 
  color: var(--midblue); */
  text-decoration: underline;
}

.primary-navigation a:active {
  color: var(--darkblue);
  text-decoration: none;
}

.nameplate {
  margin-top: 2rem;
}

main a,
.nameplate a {
  color: var(--darkblue);
}

main a:link,
.nameplate a:link {
  color: var(--darkblue);
}

main a:visited,
.nameplate a:visited {
  color: var(--darkblue);
}

main a:hover,
.progress-list li a:hover,
.nameplate a:hover {
  /* background: rgba(250, 250, 250, 0.5); */
  -webkit-transition: transform ease-in-out 250ms;
  transition: transform ease-in-out 250ms;
  text-decoration: none;
}

.candidate__endorsers li a:hover {
  -webkit-transition: unset;
  transition: unset;
  /* font-weight: bold; */
}

main a:active {
  color: var(--darkblue);
}

.wrapper__content a {
  display: inline-block;
  text-align: left;
  position: relative;
}

.progress-list li a {
  position: relative;
}

.wrapper__content a::before,
.progress-list li a::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--darkblue);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(0, 1);
  transition: transform ease-in-out 250ms;
  text-decoration: none;
}

.wrapper__content a:hover::before,
.progress-list li a:hover::before {
  transform: scale(1, 1);
  text-decoration: none;
}

.candidate__endorsers li a::before {
  content: unset;
  display: unset;
  height: unset;
  background: unset;
  position: unset;
  bottom: unset;
  left: unset;
  right: unset;
  transform: unset;
  transition: unset;
  text-decoration: unset;
}

fieldset {
  background: #fff;
  border-radius: var(--bradius);
  margin-top: 2rem;
  padding: 1rem;
  border-color: rgb(245, 245, 245);
  margin-inline: 0;
}

.candBoxColorDem fieldset.endorsers {
  background: unset;
}

.page_entry legend,
.page-state legend,
.sequence-number,
.circled-numeral {
  color: #fff;
  font-size: 2rem;
  background: var(--verydarkblue);
  --size: 3rem;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  padding-top: 0.2rem;
  text-align: center;
  margin-inline: auto;
  /* needed for Firefox to center the numeral */
}

.sequence-number {
  display: block;
  margin-top: 1rem;
  margin-bottom: -1rem;
}

.circled-numeral {
  display: inline-block;
  background: var(--midblue);
  color: white;
  line-height: 1.6;
  font-size: 1.2rem;
  --size: 2rem;
  width: var(--size);
  height: var(--size);
}

.action-bar .circled-numeral {
  font-size: 1rem;
  line-height: 0.8;
  --size: 1rem;
}

.form-element > * {
  display: block;
  text-align: left;
  font-size: 1rem;
}

.label-and-help {
  display: flex;
  justify-content: space-between;
}

.arrow-and-address {
  display: grid;
  grid-template-areas: "arrowArea entryArea";
  grid-template-columns: auto 1fr;
  column-gap: 0;
  border-radius: var(--bradius);
  background: var(--midblue);
  background-color: var(--midblue);
}

button.locationArrow {
  grid-area: arrowArea;
  border-radius: 0;
  border-top-left-radius: var(--bradius);
  border-bottom-left-radius: var(--bradius);
  /* border-color: var(--yellow); */
  padding-block: 0;
  /* margin-right: 0.4rem; */
  width: 2rem;
  border-width: 0;
  /* aspect-ratio: 1 / 1; */
}

button.close-button {
  padding: 0.4rem 2rem;
  font-weight: 600;
}

.map-alternate-controls {
  grid-area: articleArea3;
  margin-top: 0;
  margin-inline: auto;
  text-align: center;
  width: max-content;
}

.coverage select {
  /* margin-top: 0; */
  /* font-size: 1.2rem; */
  border-radius: var(--bradius);
  display: inline-block;
  padding: 0.2rem 0.4rem;
}

.button {
  text-decoration: none;
}

.coverage .button {
  /* margin-top: 0; */
  padding: 0.2rem 0.4rem;
  font-weight: 400;
  display: inline-block;
}

/* .fa-lg {
  font-size: 1.5rem;
  line-height: 1rem;
} */

.fa-check-circle-o {
  color: #0041ff;
}

#address {
  grid-area: entryArea;
  margin: 0;
}

input[type="text"],
input[type="email"],
textarea {
  /* width: 100%; */
  font-size: 1.2rem;
  border-radius: var(--bradius);
  padding: 0.4rem;
  border-color: lightgray;
  background-color: #fff;
  color: var(--darkblue);
}

.arrow-and-address input[type="text"] {
  border-radius: 0;
  border-top-right-radius: var(--bradius);
  border-bottom-right-radius: var(--bradius);
  border-left: none;
}

.arrow-and-address input:focus {
  outline: none;
}

.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 5s;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.validationError {
  background-color: lightcoral !important;
  position: relative !important;
  animation: shake 0.1s linear !important;
  animation-iteration-count: 3 !important;
}

@keyframes shake {
  0% {
    left: -5px;
    top: -1px;
  }

  100% {
    right: -5px;
    bottom: -1px;
  }
}

.label-and-help label {
  margin-bottom: 0.4rem;
}

.map-alternate-controls label {
  display: block;
  margin-bottom: 0;
}

.map-alternate-controls .button {
  /* font-size: 1.2rem; */
  padding: 0.2rem;
  border: 1px solid var(--darkblue);
}

.fa-globe {
  margin-right: 0.4rem;
}

#stateDropdown {
  display: inline-block;
}

article.video {
  /************************* RESTORE WHEN V2 VIDEO IS READY *******************/
  /* display: none; */
}

.videoWrapperContainer {
  /* grid-area: upperBottom; */
  width: 100%;
  margin: 0;
  /* ALAN change to this for larger than 560 width: clamp(200px, 500px, 500px);
  margin: 2rem auto 2rem auto !important; */
  padding: 0;
  /* border: 1px solid var(--darkblue); */
}

.videoWrapper {
  position: relative;
  margin: 0;
  /* padding-left: 0;
  padding-right: 0; */
  padding-bottom: 56.25%;
  /* padding-top: 25px; */
  height: 0;
  overflow: hidden;
  border-radius: var(--bradius);
  /* box-shadow: 5px 5px 5px #999; */
}

.videoWrapper::before {
  display: block;
  content: "";
}

.videoWrapper iframe {
  border: 0;
}

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: var(--bradius);
}

.lower-nav nav ul {
  list-style-type: none;
  padding-left: 0;
}

.lower-nav nav ul li {
  margin-block: 0.4rem;
}

.announcement {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  margin-inline: 0;
  border: 4px solid var(--lightyellow);
  border-radius: var(--bradius);
  padding: 0.4rem;
  font-size: 0.9rem;
}

.announcement p {
  margin-block: 0;
}

.page-selection .announcement,
.page-state .announcement {
  margin-inline: 1rem;
  background: #fff;
}

.announcement header {
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
}

aside {
  display: none;
}

.page-selection article,
.page-state article {
  border: 1px solid rgb(220, 220, 220);
  border-radius: var(--bradius);
  /* padding-bottom: 1rem; */
  padding-inline: 0.4rem;
  margin-bottom: 1rem;
}

article.form-only {
  border: none;
  padding: 0;
}

.page-selection article > header,
.page-state article > header {
  background: var(--lightgray);
  margin-top: 0;
  margin-bottom: 1rem;
  border-top-left-radius: var(--bradius);
  border-top-right-radius: var(--bradius);
  padding-block: 1rem;
  padding-inline: 0.8rem;
  margin-inline: -0.4rem;
}

.page-selection article > header p,
.page-state article > header p {
  margin-block: 0;
}

.page-selection article p.instructions,
.page-state article p.instructions {
  margin-top: 0.6rem;
}

.candidate,
.choice-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-areas: "selectionArea infoArea";
  align-items: start;
  margin-block-end: 0;
  padding-inline: 0.4rem;
  margin-block-start: 0.4rem;
}

.candidate {
  margin-block-end: 1rem;
}

.choice-row p {
  margin-bottom: 0;
}

section.judge {
  padding-inline: 0.4rem;
}

.choice-row {
  padding-inline: 0;
}

.proposition {
  display: grid;
  grid-template-areas:
    "propHeadingArea"
    "propBodyArea";
  align-items: start;
  margin-bottom: 1rem;
  padding-inline: 0.4rem;
  row-gap: 0.2rem;
}

.proposition .proposition__header {
  grid-area: propHeadingArea;
  display: grid;
  grid-template-areas: "emptyArea titleArea";
  grid-template-columns: 2.5rem 1fr;
}

.proposition__body {
  grid-area: propBodyArea;
  display: grid;
  grid-template-rows: auto auto;
  margin-top: 0.4rem;
}

.judge header {
  grid-area: titleArea;
}

.proposition__header header {
  grid-area: titleArea;
}

.proposition__header header > p {
  margin-top: 0;
}

.choice-info {
  grid-area: infoArea;
}

.choice-info > p {
  margin-top: 0;
}

.judge .choice-info h4 {
  margin-top: 0;
}

article hr,
.page-review hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
  width: 100%;
  margin-inline: auto;
  margin-block: 1rem;
}

.selection {
  grid-area: selectionArea;
  margin-right: 1.2rem;
  text-align: center;
}

.cand-judge .selection,
.proposition .selection {
  display: flex;
  flex-flow: column;
  gap: 0.4rem;
}

.selection input[type="radio"] {
  appearance: none;
  border: 1px solid black;
  accent-color: var(--darkblue);
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  background-clip: content-box;
  border-radius: 50%;
  padding: 2px;
}

.selection input[type="radio"]:checked {
  background-color: var(--darkblue);
}

section.selection label {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.candidate__info {
  grid-area: infoArea;
}

.instructions-line {
  display: grid;
  grid-template-columns: 1fr auto;
}

.race-and-scope {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
  align-items: center;
}

.race-and-scope img,
.race-and-scope i {
  height: 1.6rem;
  object-fit: contain;
}

.race-and-scope span:first-of-type {
  text-align: left;
}

.scope {
  display: flex;
  align-items: center;
}

.scope img {
  width: 2.5rem;
}

.mobile-hide {
  display: none;
  align-self: flex-end;
}

.scope span:first-of-type {
  margin-right: 0.5rem;
}

.stateIcon,
.race-and-scope .fa {
  display: inline-block;
}

.candidate--dem .candidate__info header {
  background: var(--lightblue);
  border-radius: var(--bradius);
  padding: 0.4rem;
}

.candidate--ind .candidate__info header,
.candidate--nonpartisan .candidate__info header {
  background: var(--lightgray);
  border-radius: var(--bradius);
  padding: 0.4rem;
}

.candidate--ind .candidate__info header,
.judge .candidate__info header {
  background: var(--lightgray);
  border-radius: var(--bradius);
  padding: 0.4rem;
}

.proposition__header header {
  background: var(--lightyellow);
  border-radius: var(--bradius);
  padding: 0.4rem;
}

.judge .candidate__info {
  display: grid;
  grid-template-areas: "emptyArea titleArea";
  grid-template-columns: 2.5rem 1fr;
}

section.candidate__info p {
  margin-top: 1rem;
  font-size: 0.9rem;
  /* line-height: 1; */
}

.candidate__info a,
.candidate__info a:link,
.candidate__info a:visited,
.candidate__info a:active {
  /* text-decoration: none; */
}

.candidate__info a:hover {
  text-decoration: none;
}

.candidate__info header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "candImageArea candInfoArea";
}

.candidate__info ul,
.choice-info ul,
.past-elections ul {
  margin-block-start: 0;
  padding-left: 0;
  list-style-type: none;
  margin-bottom: 0;
}

.past-elections ul {
  margin-top: 1rem;
}

.ballot-end {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  margin-top: 1.4rem;
  margin-bottom: 0;
  margin-inline: 1rem;
  color: #fff;
  background: var(--darkblue);
  border-radius: var(--bradius);
}

.past-elections__selected img {
  width: 6rem;
  object-fit: contain;
  margin-block: 0.5rem;
}

.past-elections__selected > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}

.past-elections__selected h3 {
  margin-block: 0;
}

.past-elections__selected--sample-ballots ul {
  margin-left: 0;
  text-indent: -2em;
}

.past-elections__selected--sample-ballots li {
  padding-left: 2em;
  margin-top: 0.2rem;
}

.past-elections__selected--sample-ballots a {
  display: inline;
}

.candidate__info li {
  margin-top: 0.4rem;
  margin-left: 0;
}

.candidate__heading {
  grid-area: candInfoArea;
}

.candidate__heading h3,
.proposition__header h3 {
  margin: 0;
}

.candidate__heading small {
  display: block;
}

.candidate__heading small::before {
  break-before: always;
}

.proposition__header p {
  margin-block-end: 0;
}

figure.candidate__image {
  grid-area: candImageArea;
  margin: 0 1rem 0 0;
}

.candidate__image img {
  max-width: 4rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--bradius);
}

.candidate__endorsers {
  list-style: none;
  padding-left: 0;
}

.candidate__info--no-endorsers {
  grid-column-start: 2;
  margin-top: -1rem;
  margin-bottom: 0.4rem;
}

.all-endorsers h2 img,
.all-endorsers h2 i {
  display: inline-block;
  margin-right: 1rem;
}

.all-endorsers h2 img {
  width: 2.5rem;
  object-fit: contain;
}

.candidate__endorsers li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin-top: 0;
  margin-bottom: 0.4rem;
  padding-left: 0;
  text-indent: 0;
  font-size: 1rem;
}

.candidate__endorsers li a {
  display: grid;
  grid-template-columns: auto 1fr;
  width: auto;
}

.candidate__endorsers li img {
  width: 1rem;
  object-fit: contain;
  display: inline-block;
  margin: 0 0.6rem 0 0;
}

.candidate__endorsers li a:hover {
  text-decoration: none;
}

.candidate__endorsers li.no-image {
  padding-left: 3.2rem;
}

.candidates-repub {
  padding: 0 1rem;
  background: var(--pink95);
  border-radius: var(--bradius);
  margin-inline: -0.4rem;
  margin-top: 1rem;
}

.candidates-repub summary {
  padding-block: 1rem;
}

.candidates-repub ul {
  padding-bottom: 1rem;
}

.button-row {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; */
  margin-top: 0.4rem;
}

.page_entry .button-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.static__about .button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-top: 3rem;
}

.button-row .button {
  text-align: center;
  border-radius: var(--bradius);
  padding: 0.4rem 1rem;
  width: 12rem;
}

dialog .button-row .button {
  padding-inline: 0.6rem;
  font-size: 0.9;
}

.page_entry .button-row .button {
  width: unset;
  width: 25%;
}

.page_entry .modal .button {
  /* this applies to the close button on the help modal */
  width: unset;
  width: max-content;
}

.static__about .button-row .button {
  width: 6.5rem;
}

.button-row a.button {
  color: #fff;
}

.button-row a.button:hover {
  color: var(--midblue);
}

.button-donate {
  /* font-size: 1.4rem; */
  /* color: var(--darkblue);
  background: var(--yellow); */
  /* when in header
  padding: 0.4rem 1rem 0.4rem 1rem;
  */
  /* padding: 1rem 0; */
  /* text-transform: uppercase;
  font-weight: 800; */
  /* when in header
  margin-right: 1rem;
  margin-bottom: 0.2rem;
  */
  /* margin-inline: auto;
  width: 10rem;
  text-align: center; */
  /* margin-top: 4rem; */
  /* border-radius: var(--bradius); */
  /* border: 0.1rem solid var(--darkblue); */
}

.button-donate {
  /* margin-top: 1rem; */
}

.button-donate a {
  /* text-decoration: none;
  color: var(--darkblue); */
}

.page-selection footer,
.page-review footer,
.page-state footer {
  /* padding-inline: 0.4rem; */
}

.page-selection footer,
.page-review footer,
.page-state footer {
  position: sticky;
  bottom: 0;
}

footer.no-ballot-nav {
  position: static;
}

.action-bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  justify-items: center;
  align-items: center;
  background: white;
  padding-block: 0.6rem;
  /* padding-inline: 1rem; */
  grid-gap: 0.4rem;
  font-size: 0.9rem;
}

main.page_entry + footer .action-bar {
  /* background: #fffaf7; */
}

.action-bar .mobile-button-label {
  display: block;
  font-size: 0.8rem;
}

.page-review footer .action-bar {
  grid-template-columns: auto auto auto auto auto auto;
  gap: 0.1rem;
  /* padding-inline: 1rem; */
}

.page-selection .action-bar button,
.page-selection .action-bar .button:first-of-type,
.page-state .action-bar button,
.page-state .action-bar .button:first-of-type {
  /* min-width: 6rem; */
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  margin-block: 0.25rem;
  border: 1px solid var(--midblue);
  border-radius: var(--bradius);
}

.page-selection .action-bar .button:first-of-type,
.page-state .action-bar .button:first-of-type {
  padding: 0.3rem 0.5rem;
}

.action-bar .button > * {
  vertical-align: bottom;
}

.page-selection .action-bar button.button:first-of-type,
.page-state .action-bar button.button:first-of-type {
  justify-self: start;
  padding: 0.4rem 0.5rem 0.4rem 0.5rem;
}

.page-selection .action-bar button.button:nth-of-type(2),
.page-state .action-bar button.button:nth-of-type(2) {
  padding: 0.3rem 0.5rem 0.5rem 0.5rem;
}

.page-selection .action-bar button.button:last-of-type,
.page-state .action-bar button.button:last-of-type {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
}

.page-review .action-bar button.button:first-of-type {
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  align-items: center;
  line-height: 1;
}

.page-review .action-bar button.button:first-of-type i:before {
  vertical-align: middle;
}

.action-bar button {
  display: flex;
  align-items: center;
}

.fa-ballot-check {
  margin-right: 0.2rem;
}

.page-selection .action-bar .button:first-of-type i,
.page-state .action-bar .button:first-of-type i {
  vertical-align: middle;
}

.page-review .action-bar button {
  /* width: 90%; */
  margin: unset;
  vertical-align: unset;
  padding-bottom: 0.5rem;
}

/* .page-review .action-bar button:nth-of-type(5) {
  grid-column: 1 / 3;
  width: 50%;
} */

.action-counter {
  display: flex;
  align-items: center;
  line-height: 1.8;
}

.action-counter,
.horizontal-progress-bar-container {
  border: 1px solid var(--midblue);
  border-radius: var(--bradius);
  width: 100%;
  height: 75%;
  position: relative;
}

#horizontal-progress-bar-filter-container {
  height: 3.2em;
  /* border:none; */
}

#horizontal-progress-bar-filter-container span {
  font-weight: 700;
  font-size: 0.9;
  text-align: center;
  position: absolute;
  top: 0.4em;
  left: 0;
  margin-inline: auto;
  width: 100%;
  text-wrap: balance;
}

aside .horizontal-progress-bar-container {
  width: auto;
  height: 1.8rem;
  margin-top: 1.2rem;
  margin-inline: 0.5rem;
  background: #fff;
}

.action-counter-backfill,
.horizontal-progress-bar {
  /* display: flex; */
  align-items: center;
  /* background-image: repeating-linear-gradient(to right, var(--lightblue), var(--midblue),var(--darkblue) ); */
  /* box-shadow: 0 .2rem .2rem -.2rem var(--darkblue), 0 .2rem .5rem var(--midblue); */
  background-color: var(--medgray);
  color: var(--darkblue);
  font-weight: 700;
  height: 100%;
  width: 0;
  border-radius: var(--bradius);
  transition: 500ms ease 0.3s;
  /* text-align: center; */
}

aside .horizontal-progress-bar {
  background-color: var(--lightblue);
}

.filter-dialog__progress-bar--horizontal {
  /* align-items: center; */
  background-color: var(--medgray);
  color: var(--lightgray);
  height: 100%;
  /* width: 0; */
  border-radius: var(--bradius);
  transition: 500ms ease 0.3s;
}

#ballotProgressBarFooterCounterText,
#horizontal-progress-bar-CounterText {
  width: 100%;
  text-align: center;
  position: absolute;
  left: calc(100%-50%);
  top: 0.25rem;
  background: transparent;
  font-weight: 700;
}

.button--darklight {
  color: var(--midblue);
  background: white;
  border: 1px solid var(--midblue);
  text-decoration: none;
}

.button a {
  text-decoration: none;
}

.button--darklight a {
  color: var(--midblue);
}

.button--darklight a:link {
  color: var(--midblue);
}

.button--darklight:hover {
  color: white;
  background: var(--midblue);
}

.button--darklight a:visited {
  color: var(--midblue);
}

.button--lightdark {
  color: white;
  background: var(--midblue);
  border: 1px solid var(--midblue);
}

.button--lightdark:hover,
input.address-submit:hover {
  color: var(--midblue);
  background: white;
  z-index: 1;
}

.button--lightdark a {
  color: white;
  text-decoration: none;
  z-index: 2;
}

.button--lightdark a:link {
  color: white;
  text-decoration: none;
  z-index: 2;
}

.button--lightdark a:visited {
  color: white;
  text-decoration: none;
  z-index: 2;
}

.button--lightdark a:hover {
  color: var(--midblue);
  text-decoration: none;
  z-index: 2;
}

.button--lightdark a:active {
  color: var(--midblue);
  text-decoration: none;
  z-index: 2;
}

.button--lightdark:hover a {
  /* This is the solution for buttons that contain hrefs */
  color: var(--midblue);
  text-decoration: none;
}

.button--darklight:hover a {
  /* This is the solution for buttons that contain hrefs */
  color: white;
  text-decoration: none;
}

footer .action-bar .button--darklight:hover {
  /* This is for the icons in the mobile footer to not do the color reverse */
  color: var(--midblue);
  background: none;
}

.action-bar .button {
  border: none;
}

.action-bar .action-counter + .button--darklight {
  border: 1px solid var(--midblue);
}

/* .action-bar .action-counter + .button--darklight + .button--darklight  {
  border: 1px solid var(--midblue);
} */

.action-bar .button i::before {
  font-size: 1.2rem;
}

.action-bar button.button i::before {
  font-size: 1.2rem;
}

.action-bar a.button {
  text-align: center;
}

/* .action-bar a.open-link_saveBallot_footer::after {
  font-size: .8rem;
  content: '\aSave';
  white-space: pre-wrap;
}

.action-bar a.button:nth-of-type(2)::after {
  font-size: .8rem;
  content: '\aPrint';
  white-space: pre-wrap;
}

.action-bar a.button:nth-of-type(3)::after {
  font-size: .8rem;
  content: '\aShare';
  white-space: pre-wrap;
}

.action-bar a.button:nth-of-type(4)::after {
  font-size: .8rem;
  content: '\aFeedback';
  white-space: pre-wrap;
} */

.assessment {
  margin-block-end: 0;
}

.page-review .wrapper__content {
  padding-inline: 1rem;
}

.page-review dl div {
  border-radius: var(--bradius);
}

.page-review dt {
  padding-block: 0.2rem;
  padding-inline: 0.1rem;
  font-size: 1.2rem;
  font-weight: 700;
  vertical-align: baseline;
}

dt .race-scope {
  font-size: 1rem;
  font-weight: 500;
}

h2 .race-scope {
  display: grid;
  grid-template-columns: 1fr auto;
}

dt img {
  margin-left: 0.4rem;
  height: 1.5rem;
  object-fit: contain;
}

.page-review dt > span {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  justify-items: start;
}

.race--nonpartisan {
  background: var(--lightgray);
}

.race--dem {
  background: var(--lightblue);
}

.race--prop {
  background: var(--lightyellow);
  text-wrap: balance;
}

.page-review dt i,
.page-review dd i {
  margin-left: 0.4rem;
  line-height: 0.8;
}

.page-review dt {
  margin-top: 1rem;
}

.page-review dd {
  margin: 0;
  padding: 0.3rem 0 0.3rem 0;
  line-height: 1.2;
  /* box-shadow: 0 .2rem .6rem -.2rem rgba(0, 0, 0, 0.2);  */
}

/* to make them all lightgray!
 .page-review dt,
.page-review dd {
  background: var(--lightgray)!important;
} */

.approve--yes i,
.approve--no i {
  margin-right: 0.5rem;
}

/* .page-review dd span {
  margin-right: 1rem;
} */

.page-review dd span:last-of-type {
  /* margin-left: 0.4rem; */
}

.page-review dd span.approve--no,
.page-review dd span.approve--yes,
.page-review dd span.approve--none {
  margin-left: 0;
}

dt.race--nonpartisan + dd span.approve--no,
dt.race--nonpartisan + dd span.approve--yes,
dt.race--nonpartisan + dd span.approve--none {
  font-weight: 700;
}

.page-review dd {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: center;
}

.note,
.progress-bar figcaption {
  margin-top: 0;
  text-align: center;
  font-size: 1rem;
  font-style: italic;
}

.progress-bar figcaption {
  font-style: normal;
}

.note {
  margin-block: 1rem;
  text-align: left;
}

.static {
  /* MUST CONSODLIDATE INTO A UNIFORM TEMPLATE FOR V2 */
  display: grid;
  grid-template-areas:
    "topMatter"
    "bottomMatter"
    "footerArea";
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  /* min-height: 100%; */
  row-gap: 2rem;
}

.static p {
  text-align: left;
}

.static__about .static__top-matter,
.static__contact .static__top-matter {
  /* background: url("img/about-wave-elizabeth-lies-ZWPerNlqUu0-unsplash.psd.jpg")
    right top; */
  padding: 0;
  grid-area: topMatter;
}

.static__about h1 + p {
  font-weight: 700;
}

.static .static__top-matter--content {
  grid-area: topMatter;
  width: 100%;
  margin-inline: auto;
  align-items: top;
  gap: 2rem;
  grid-template-areas:
    "staticFirstArea"
    "staticSecondArea";
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 2rem;
}

.static__contact .static__top-matter--first,
.static_translate .static__top-matter--first {
  grid-area: staticFirstArea;
  padding-inline: 1rem;
}

.static__contact .static__top-matter--page-article,
.static__translate .static__top-matter--page-article {
  grid-area: staticSecondArea;
}

.static form {
  margin-inline: auto;
}

.static form > * {
  background: white;
  font-size: 1.4rem;
}

input[type="submit"] {
  display: block;
  /* cancels inline-block */
  margin-block: 1rem;
  margin-inline: auto;
  background: var(--midblue);
  color: #fff;
  text-transform: none;
  -webkit-appearance: none;
  /* necessary to cancel extra rounding of corners on phones */
  border-radius: var(--bradius);
  font-size: 1.2rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--midblue);
  width: 100%;
}

.static__contact p {
  font-size: 1.2rem;
  margin-block: 1rem;
  padding: 0;
  font-weight: 600;
  /* text-align: center; */
}

.static form .input-container {
  display: flex;
  flex-flow: column;
  margin-bottom: 1rem;
}

.static label {
  display: block;
  margin-top: 1rem;
}

.static form .input-container p {
  font-size: 0.8rem;
  text-align: left;
  margin-top: 0;
}

.static input:not([type="submit"]),
.static textarea {
  display: block;
  border: 1px solid gray;
  height: 2rem;
  flex-grow: 1;
}

.static textarea {
  min-height: 6rem;
}

.page-state article.state-sample-ballots {
  padding: 1rem;
}

.state-sample-ballots ul {
  list-style-type: none;
  padding-left: 0;
  columns: 2;
}

.state-sample-ballots li {
  margin-bottom: 0.8rem;
}

.state-sample-ballots ul img {
  width: 2em;
  object-fit: contain;
  display: inline-block;
  margin-right: 0.4em;
}

article p {
  margin-bottom: 0;
}

.nameplate img {
  width: 60%;
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: 0;
}

.nameplate h1 {
  margin-top: 1rem;
}

.nameplate p {
  text-align: center;
}

.endorsees dl > div {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
}

.endorsees dl img {
  width: 3rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: left top;
}

.page-endorser dt {
  font-weight: 700;
}

.page-endorser dd {
  margin-left: 0;
  padding-left: 0;
}

.page-selection dialog .button-row .button,
.page-state dialog .button-row .button,
.page-review dialog .button-row .button,
.page-review dialog .action-bar button.button:first-of-type {
  /* width: max-content; */
  width: max-content;
  font-weight: unset;
  padding-inline: 2em;
  text-align: center;
}

.page-selection dialog .button-row button.button,
.page-selection dialog .button-row button.button:last-of-type,
.page-selection dialog .button-row button.button:first-of-type,
.page-state dialog .button-row button.button,
.page-state dialog .button-row button.button:last-of-type,
.page-state dialog .button-row button.button:first-of-type,
.page-review dialog .button-row button.button {
  padding: 0.6rem 1rem;
  font-size: 1rem;
}

.page-selection dialog#dModal_confirmPartialBallot_footer .button-row button,
.page-state dialog#dModal_confirmPartialBallot_footer .button-row button {
  width: 16em;
  text-align: center;
  padding: 0.6rem auto;
  justify-content: center;
  font-size: 0.9rem;
}

dialog input {
  margin-top: 0.6rem;
}

dialog input[type="checkbox"] {
  margin-top: 0;
}

dialog input + label {
  /* margin-left: 0.4rem; */
  font-weight: 700;
}

dialog label + input {
  display: block;
  margin-left: 2rem;
  margin-top: 0;
  width: auto;
}

.modal_survey form li {
  display: grid;
  align-items: start;
  grid-template-columns: 2rem 1fr;
  width: 100%;
  margin-bottom: 1rem;
  column-gap: 0.2rem;
}

.modal_survey form input {
  margin-top: 0.2rem;
  margin-inline: 0;
}

.modal_survey form li:nth-of-type(5) {
  grid-template-rows: auto auto;
}

.modal_survey form li:nth-of-type(5) label {
  align-self: end;
  margin-left: 0;
  margin-bottom: 0;
  line-height: 1;
}

.modal_survey form li:nth-of-type(5) input[type="text"] {
  grid-column: 2 / 3;
  margin-left: 0;
  width: calc(100% - 1rem);
  margin-top: 0.2rem;
}

.modal_survey form li:last-of-type {
  margin-top: 1rem;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  width: 100%;
}

.modal_survey form li:last-of-type label + input {
  margin-left: 0;
}

dialog header button.X-button {
  padding: 0.3rem 0.5rem;
  margin-block: 0;
  line-height: 0.8rem;
  font-size: 1rem;
  /* justify-self: end; */
}

dialog ul {
  list-style-type: none;
  margin-inline: 0;
  padding-inline: 0;
}

.nav-item {
  margin-inline: 1rem;
  margin-bottom: 1rem;
}

a.button.icon-only {
  border: none;
}

.dialog__checklist {
  display: block;
  overflow-y: auto;
  margin-block: 0;
  padding-top: 0.4rem;
  max-height: calc(100vh-100px);
}

.dialog__checklist input[type="checkbox"] {
  transform: scale(1.4);
}

.dialog__checklist li {
  margin-left: 1.6rem;
  text-indent: -1.6rem;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.modal {
  background: #fff;
  padding-block: 0;
}

.modal header {
  background: #fff;
  position: sticky;
  top: 0;
  padding-block: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "modalHeadingArea closeButtonArea";
  align-items: start;
  gap: 1rem;
  z-index: 10;
  padding-bottom: 1rem;
}

.modal_filter header {
  grid-template-areas:
    "modalHeadingArea closeButtonArea"
    "filterExplanationArea filterExplanationArea"
    "filterSearchArea filterSearchArea"
    "filterProgressArea filterProgressArea";
  row-gap: 0.5rem;
  /* margin-bottom: 1rem; */
}

.modal_filter header .filter-search {
  grid-area: filterSearchArea;
  display: flex;
  align-items: center;
  margin-top: 0;
}

.modal_filter .filter-explanation {
  grid-area: filterExplanationArea;
  margin-block: 0;
}

.modal h4 {
  font-size: 1.2rem;
  margin-top: 0;
  grid-area: modalHeadingArea;
}

.modal_filter header div.horizontal-progress-bar-container {
  grid-area: filterProgressArea;
  margin-top: 0.4rem;
}

.modal .X-button {
  grid-area: closeButtonArea;
}

.modal footer {
  background: #fff;
  position: sticky;
  bottom: 0;
  padding-bottom: 0.6rem;
  padding-top: 0.4rem;
  padding-inline: 0;
}

/* .modal footer .button-row {
  display: grid;
  justify-items: center;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
} */

.modal footer .button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-selection dialog#dModal_confirmPartialBallot_footer .button-row,
.page-state dialog#dModal_confirmPartialBallot_footer .button-row {
  justify-content: center;
}

.modal_filter input[type="text"].filter-endorser-type-ahead {
  margin: 0 0 0 0.6rem;
  flex-grow: 1;
}

/* .modal_filter .horizontal-progress-bar-container span {
  display: block;
  text-align: center;
  margin-block: 0;
  margin-inline: auto;
} */

.modal_filter header span i {
  margin-right: 1rem;
}

.modal_filter footer .button-row,
.modal_survey footer .button-row {
  justify-content: space-between;
}

.modal footer .button-row button:only-of-type {
  justify-self: center;
}

.filter-choices {
  list-style-type: none;
  margin-inline: 1rem;
  padding-left: 0.3rem;
}

.filter-choices li {
  text-indent: -0.5rem;
  padding-left: 1.5rem;
  margin-left: 0;
}

.filter-choices li i {
  margin-right: 0.4rem;
}

.filter-choices li i.fa-box-check {
  /* margin-left: 1.8rem; */
  margin-right: 0;
}

.select-endorsements-button {
  text-indent: 0;
  text-decoration: none;
}

.page_entry article.intro {
  /* grid-template-columns: 0.3fr 2.8fr 0.3fr;
  grid-template-areas: "spacerArea1 introArea spacerArea2"; */
  grid-template-columns: 1fr;
  grid-template-areas: "introArea";
  /* background: var(--compblue); */
  border-radius: var(--bradius);
  padding: 1rem;
  text-align: center;
  margin-inline: 0;
  padding-top: 0;
}

.intro p {
  text-wrap: balance;
  color: #fff;
}

.page_entry .grouping:first-of-type {
  display: block;
  padding-top: 0;
  padding-bottom: 0;
  /* AlanB omitted 17 Nov 2023 background: var(--compblue); */
  /* gradient is Jiyoung's suggestion */
  background-image: linear-gradient(rgb(68, 122, 185), rgb(19, 78, 150));
}

.page_entry .grouping:first-of-type svg {
  margin-top: 2.8rem;
  z-index: 2;
}

/* used for incomplete address confirmation dialog */
button:disabled,
button[disabled] {
  border: 1px solid #999999;
  background-color: red;
  color: #666666;
  cursor: not-allowed;
}

/* to filter out (aka hide) sections */
.hideDueToFilter {
  display: none;
}

a#sectionJumpToTop {
  visibility: hidden;
}

span.cand-prop-count-details {
  font-size: 0.8rem;
}

.page_entry .intro .center img {
  transform: scale(0.7);
}

.translate__steps li {
  margin-bottom: 2rem;
}

dialog,
.modal {
  color: #000;
}

.static__partners header {
  display: grid;
  grid-template-rows: auto auto;
  text-align: center;
  gap: 1rem;
  align-items: start;
}

.partners__collection figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--lightgray);
  border-radius: var(--bradius);
  object-fit: scale-down;
  margin-block: 0;
}

.partners__collection {
  display: grid;
  grid-template-columns: 1fr;
  /* flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start; */
  gap: 1rem;
  width: 100%;
}

.partners__collection a {
  max-width: 90%;
  max-height: 90%;
  margin-block: 1rem;
  text-align: center;
}

@media (min-width: 320px) {
  .static__partners header {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    align-items: center;
  }

  .static__partners h2 {
    text-align: left;
    margin-block: 0;
  }

  /* Set up for 2 columns */
  .partners__collection {
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
  }

  .partners__collection figure {
    grid-column: span 2;
  }

  /* 1 of 1 remaining in a 2-column row */
  .partners__collection figure:last-child:nth-child(2n - 1) {
    grid-column-end: 4;
  }
}

@media (min-width: 400px) {
  #horizontal-progress-bar-filter-container {
    height: 1.6em;
    /* border:none; */
  }
  #horizontal-progress-bar-filter-container span {
    top: 0.2em;
  }
}

@media (min-width: 520px) {
  .modal footer .button-row {
    justify-content: space-between;
  }

  .static__about .button-row {
    justify-content: center;
    gap: 5rem;
  }

  .page_entry .participate h2 {
    text-align: center;
  }

  .page_entry .button-row {
    justify-content: space-evenly;
  }

  .partners__collection {
    grid-template-columns: repeat(6, 1fr);
  }

  /* 2 of 2 in a 3-column row */
  .partners__collection figure:last-child:nth-child(3n - 1) {
    grid-column-end: -2;
  }

  /* 1 of 2 in a 3-column row */
  .partners__collection figure:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: 4;
  }

  .partners__collection figure:last-child:nth-child(3n - 2) {
    grid-column-end: 5;
  }

  .partners__collection figure:last-child:nth-child(3n) {
    grid-column-end: 7;
  }
}

@media (min-width: 600px) {
  body {
    font-size: 1.2rem;
  }

  .horizontal-progress-bar-container span {
    font-size: 1rem;
    margin-top: 0.2em;
  }

  h1 {
    font-size: 2.4rem;
    /* text-align: left; */
  }

  .page_entry h1,
  .page_entry h1 span {
    font-size: 5rem;
  }

  h2 {
    font-size: 1.6rem;
    margin-top: 2rem;
    text-align: left;
  }

  h3,
  .page_entry h2 {
    margin-top: 2rem;
    font-size: 1.4rem;
  }

  .page_entry .intro h2 {
    margin-top: 0.2rem;
    font-size: 2.4rem;
  }

  .page-state h3 {
    margin-top: 1rem;
  }

  section.right {
    display: block;
  }

  article {
    margin-inline: min(1rem);
  }

  .map-alternate-controls label {
    font-size: 1.2rem;
  }

  .coverage select {
    margin-top: 0;
    font-size: 1.2rem;
  }

  .coverage .button {
    font-size: 1.2rem;
    margin-top: 0;
  }

  /* .button-donate {
    margin-left: 0;
    margin-right: auto;
  } */

  input[type="submit"] {
    width: unset;
    width: 20rem;
  }

  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .page-review footer .action-bar {
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr;
    /* padding-left: 2rem; */
  }

  .state-sample-ballots ul {
    columns: 3;
  }

  .nameplate {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
  }

  .nameplate img {
    width: 6rem;
    margin-inline: unset;
  }

  .nameplate h1 {
    text-align: left;
    margin-block: 0;
  }

  .nameplate p {
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: left;
  }

  .endorsed-propositions dl {
    columns: 2;
  }

  .endorsees dl div,
  .endorsed-propositions dl > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  dialog {
    width: 560px;
    margin-inline: auto;
  }

  .affiliates figure a {
    display: block;
    width: max-content;
  }

  .affiliates figure a {
    margin: 0 auto;
  }

  .affiliates img {
    transform: scale(0.8);
  }

  .page-selection dialog .button-row .button {
    margin-inline: auto;
  }

  .page-selection dialog#dModal_confirmPartialBallot .button-row button,
  .page-state dialog#dModal_confirmPartialBallot .button-row button {
    margin-left: 0;
    margin-right: 0;
  }

  .static__partners header {
    max-width: 80%;
    margin-inline: auto;
  }

  .static__partners header h2 {
    font-size: 1.2rem;
  }
}

@media (min-width: 750px) {
  /* .lang-choice {
    max-width: 1100px;
    margin: 1rem auto;
    padding-right: 1rem;
  } */

  .grouping {
    /* margin-bottom: 2rem; */
    padding-bottom: 2rem;
  }

  table {
    margin-left: 0;
  }

  caption {
    font-weight: 700;
    margin-top: 1rem;
  }

  th,
  td {
    vertical-align: middle;
  }

  .coverage th img {
    width: 1.4rem;
    margin-right: 1.4rem;
  }

  .steps ol {
    margin-top: 5rem;
    padding-left: 4rem;
    padding-inline-start: 2rem;
  }

  .steps ol li {
    margin: 0 0 1.4rem 0;
  }

  .steps ol li::before {
    --size: 2.2rem;
  }

  .race-and-scope img {
    width: 2.5rem;
    object-fit: contain;
  }

  .sequence-number {
    margin-top: 1rem;
  }

  .announcement {
    /* margin-inline: 0; */
    /* compensates for .wrapper appearing at this media query */
    margin-top: 0;
    font-size: 1.1rem;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .wrapper {
    max-width: 90%;
    margin-inline: auto;
    margin-left: min(2rem);
    margin-right: min(2rem);
    column-gap: 1rem;
  }

  .page-admin .wrapper {
    max-width: unset;
  }

  .wrapper__content {
    flex-basis: 0;
    flex-grow: 999;
    min-width: 40%;
  }

  .wrapper__content h2:first-of-type {
    margin-top: 0;
  }

  .mobile-hide {
    display: inline-block;
  }

  .stateIcon {
    display: inline-block;
  }

  .progressSectionCurrent {
    background: var(--lightblue);
  }

  .progressSectionMeasureComplete {
    background: var(--medgray);
  }

  .page_entry article {
    grid-template-areas: "articleArea1 articleArea2";
    grid-template-columns: 1.8fr 0.9fr;
    align-items: start;
    grid-column-gap: 3rem;
  }

  .page_entry article.coverage {
    grid-template-areas:
      "articleArea0 articleArea0"
      "articleArea1 articleArea2"
      "articleArea3 articleArea3";
    grid-row-gap: 0;
  }

  .page_entry article.sequence-and-form,
  .page-state article.sequence-and-form {
    grid-template-columns: 0.9fr 1.8fr;
    align-items: center;
  }

  .page_entry article.video,
  .page_entry article.donate,
  .page_entry article.samples,
  .page-state article {
    /* This set of rules centers the content on the entry page below the form */
    grid-template-areas: "articleArea0 articleArea1 articleArea2";
    grid-template-columns: 0.45fr 1.8fr 0.45fr;
    grid-column-gap: 1.5rem;
  }

  .page_entry article.video {
    grid-template-columns: 0.45fr 1.4fr 0.45fr;
    grid-row-gap: 0;
  }

  .video section.left {
    grid-area: articleArea0;
    grid-column: 1 / 3;
  }

  .video section.center {
    grid-area: articleArea1;
    margin-top: 0;
  }

  .video section.center figure {
    /* margin-top: 5rem; */
  }

  .page_entry article.affiliates,
  .page_entry article.participate {
    grid-template-areas: "articleArea1";
    grid-template-columns: 1fr;
  }

  .page_entry article.participate {
    /* margin-top: 2rem; */
  }

  .affiliates img {
    width: unset;
    object-fit: unset;
  }

  .coverage .right {
    align-self: center;
  }

  .coverage-explanation {
    margin-top: 3rem;
  }

  .map-alternate-controls {
    margin-top: 0;
  }

  article.lower-nav {
    display: none;
  }

  footer {
    padding-inline: 3rem;
  }

  .modal footer {
    padding-inline: 0;
  }

  .page_entry .intro .center img {
    transform: scale(0.6);
    margin-block: -1rem;
  }

  .action-bar {
    font-size: 1rem;
    line-height: 1.4;
  }

  .affiliates img {
    transform: scale(1);
  }

  .page_entry h2 {
    margin-top: 3rem;
  }

  .partners__collection {
    grid-template-columns: repeat(8, 1fr);
  }

  .partners__collection figure:last-child:nth-child(3n - 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(3n - 2) {
    grid-column-end: unset;
  }

  /* last item of a row of 2 in a 4-column grid */
  .partners__collection figure:last-child:nth-child(4n - 2) {
    grid-column-end: -3;
  }

  /* next-to-last item of a row of 2 in a 4-column grid */
  .partners__collection figure:nth-last-child(2):nth-child(4n + 1) {
    grid-column-end: 5;
  }

  /* last item of a row of 3 in a 4-column grid */
  .partners__collection figure:last-child:nth-child(4n - 1) {
    grid-column-end: -2;
  }

  .partners__collection figure:nth-last-child(2):nth-child(4n + 2) {
    grid-column-end: 6;
  }

  .partners__collection figure:nth-last-child(3):nth-child(4n + 1) {
    grid-column-end: 4;
  }

  /* dealing with a single orphan */
  .partners__collection figure:last-child:nth-child(4n - 3) {
    grid-column-end: 6;
  }

  .static__partners header {
    max-width: 60%;
  }
}

@media (min-width: 900px) {
  .past-elections__selected--sample-ballots img {
    width: unset;
    max-width: 8rem;
    margin-left: 0;
  }

  .nonpartisan header {
    display: grid;
    grid-template-rows: auto auto;
  }

  .proposition {
    margin-top: 1rem;
    row-gap: 1rem;
  }

  .propositions > .proposition:first-of-type {
    margin-top: 1rem;
  }

  .proposition__header {
    margin-bottom: 1rem;
  }

  .proposition__body {
    margin-top: 0;
    margin-block-start: 0;
    border: transparent;
  }

  .choice-row {
    margin-top: 0;
    margin-bottom: 1rem;
    border: transparent;
  }

  .candidate {
    border: transparent;
  }

  .candidate__endorsers {
    column-count: 2;
    column-width: auto;
    column-gap: 1rem;
    /* margin-left: 0; */
    border: transparent;
    /* overflow: visible; */
  }

  .wrapper {
    max-width: 90%;
  }

  footer .action-bar {
    display: none;
  }

  .sidebar {
    display: block;
    --offset: var(--space);
    flex-grow: 1;
    flex-basis: 300px;
    align-self: start;
    position: sticky;
    top: calc(var(--offset) * 4);
    background: var(--lightgray);
    border-radius: var(--bradius);
    padding: 1rem;
  }

  .page-selection .sidebar,
  .page-state .sidebar {
    max-height: calc(100vh - var(--offset) * 6);
  }

  .sidebar .action-bar {
    grid-template-columns: 1fr;
    margin-top: 0.4rem;
    padding-inline: 1rem;
    background: none;
    padding-block: 0;
    border: none;
    line-height: 1;
  }

  .sidebar .action-bar figure {
    margin-block: 0;
  }

  .sidebar .action-bar i.fa {
    font-size: 2em;
  }

  .sidebar__component {
    /* display: grid; */
    background: rgb(230, 230, 230);
    border-radius: var(--bradius);
    /* margin-top: 1rem; */
    padding: 0.4rem;
    /* grid-template-rows: auto 1fr auto; */
    /* grid-template-columns: auto; */
  }

  .sidebar__component__content {
    /* max-height: calc(100vh - var(--offset) * 10); */

    /* max-height: 500px; */
    /* overflow-y: auto; */
  }

  .sidebar__component {
    /* AlanB restore this once we figure it all out */

    /* overflow-y: auto; */
    /* needed overflow-y HERE for FF to prevent spillage */
  }

  .page-review .sidebar__component {
    /* AlanB restore this once we figure it all out */
    /* max-height: calc(100vh - var(--offset) * 8); */
  }

  .page-selection aside button,
  .page-state aside button,
  .page-review aside button {
    display: block;
    width: 100%;
    padding-block: 0.6rem;
    margin-block: 0.6rem;
    font-size: 1rem;
  }

  .page-selection aside button.X-button,
  .page-state aside button.X-button,
  .page-review aside button.X-button {
    width: 2em;
    height: 2em;
  }

  .sharethis-inline-share-buttons {
    display: block;
    width: auto;
    background: #fff;
    padding-top: 0.3rem;
    padding-bottom: 0.1rem;
    margin-top: 0.6rem;
    margin-bottom: 0;
    font-size: 1.2rem;
    border: 1px solid var(--darkblue);
    border-radius: var(--bradius);
  }

  .action-bar--section {
    display: flex;
    width: 100%;
    padding: 0;
    justify-content: space-between;
  }

  .page-review .sidebar figure {
    margin-top: 2rem;
    /* width: 90%; */
    margin-inline: auto;
  }

  .page-review .sidebar__component {
    /* scrollbar-gutter:unset; */
  }

  /* need to assign a class to the rideshare2vote figure instead of all this
  adjacent sibling selection */
  .page-review .sidebar .progress-bar + a + figure {
    border: 0.1rem solid var(--darkblue);
    border-radius: var(--bradius);
    margin-inline: auto;
    padding-block: 0.4rem;
    padding-inline: 0.2rem;
    background: #fff;
  }

  .page-review .sidebar .progress-bar + a + figure:hover {
    background: var(--lightblue);
    /* font-weight: 700; */
  }

  .page-review .sidebar .progress-bar + a + figure img {
    width: 50%;
    object-fit: contain;
    margin-inline: auto;
  }

  .page-review .sidebar .progress-bar + a + figure figcaption {
    font-size: 0.9rem;
    line-height: 1;
    font-style: italic;
    margin-top: 0.2rem;
    margin-inline: auto;
  }

  .sidebar .action-bar figure {
    text-align: center;
  }

  .sidebar figure i::after {
    text-align: center !important;
  }

  .sidebar figcaption {
    margin-inline: auto;
    text-align: center;
    font-style: normal;
    width: 80%;
  }

  .sidebar .action-bar figcaption {
    font-size: 1rem;
    white-space: nowrap;
    margin-top: 0.2rem;
    width: unset;
  }

  .sidebar .action-bar i {
    padding-block: 0;
    padding-inline: 1rem;
  }

  .sidebar .action-bar a {
    text-decoration: none;
  }

  .sidebar .action-bar a:link {
  }

  .sidebar .action-bar a:visited {
  }

  .sidebar .action-bar a:hover {
    text-decoration: underline;
    /* font-weight: 700; */
  }

  .sidebar .action-bar a:active {
  }

  /* .sidebar__component__content button:nth-of-type(2) {
    margin-bottom: 1rem;
  } */

  .sidebar__component__content .action-bar button {
    /* resets from .page-entry settings */
    margin-block: 0.5rem;
  }

  /* .sidebar__component__content > div:first-of-type {
    border: none;
    margin: 0;
  } */

  #verticalIndex {
    max-height: calc(100vh - var(--offset) * 18);
    margin-top: 1rem;
    overflow-y: auto;
  }

  .pie-wrapper {
    display: block;
    width: 160px;
    height: 160px;
    margin: 2rem auto 1rem auto;
    /* position: absolute; */
    /* transform: translate(-50%, -50%);   */
    position: relative;
  }

  .pie {
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--darkblue);
  }

  .pie--right {
    border-radius: 50%;
    z-index: 1;
    clip: rect(0px, 80px, 160px, 0px);
    -webkit-transform: rotate(180deg);
    /* border: 0px white solid; */
  }

  .pie--left {
    border-radius: 50%;
    z-index: 2;
    clip: rect(0px, 80px, 160px, 0px);
    background: var(--lightgray);
    -webkit-transform: rotate(180deg);
  }

  .percent-overlay {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: lightgray;
    position: absolute;
    z-index: 4;
    left: 16px;
    top: 16px;
    line-height: 130px;
    text-align: center;
    color: var(--darkblue);
    font-weight: 800;
    font-size: 1.6rem;
  }

  .link-to-page-top {
    display: block;
    text-align: center;
    margin-inline: auto;
  }

  .progress-list {
    list-style: none;
    padding-inline-start: 0;
    text-indent: -0.7rem;
    padding-left: 2rem;
  }

  .progress-list li {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .progress-list li:last-of-type {
    margin-bottom: 0;
  }

  .static__contact .static__top-matter {
    /* background: url("img/about-wave-elizabeth-lies-ZWPerNlqUu0-unsplash.psd.jpg")
      right top; */
    padding: 2rem 0;
    grid-area: topMatter;
  }

  .static .static__top-matter--content {
    /* grid-area: topMatter; */
    display: grid;
    max-width: 1120px;
    grid-template-areas: "staticFirstArea staticSecondArea";
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    align-items: start;
    gap: 3rem;
  }

  .static p {
    text-align: left;
  }

  .static .static__top-matter--first > * {
    text-align: left;
    margin-left: 0;
  }

  .static__top-matter--content--page-article {
    padding-left: 0;
  }

  .static__build .static__top-matter--content {
    grid-template-columns: 4fr 2fr;
    width: 1120px;
  }

  .static__top-matter--content {
    max-width: 1120px;
    grid-template-areas: "staticFirstArea staticSecondArea";
    grid-template-columns: 1fr 1fr;
  }

  .static__top-matter--page-article {
    grid-area: staticFirstArea;
    color: var(--darkblue);
    font-weight: 600;
    width: 100%;
    max-width: 800px;
    justify-self: start;
  }

  .static__contact .static__top-matter--page-article {
    grid-area: staticSecondArea;
  }

  .static__contact .static__top-matter--page-article {
    justify-self: start;
  }

  .input-container p {
    margin-bottom: 0.4rem;
  }

  .button-row {
    margin-top: 0.4rem;
    justify-content: flex-start;
  }

  .endorsees dl {
    columns: 2;
  }

  .endorsees dl > div:first-of-type {
    margin-top: 0;
  }

  .endorsed-propositions dl {
    columns: 3;
  }

  /* if active filter then for desktop we show filter icon in progress bar */
  .horizontal-progress-bar-filter {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    position: relative;
    z-index: 99999 !important;
  }

  .page_entry .intro figure {
    margin-block: 0;
  }

  .static__about article > h2 {
    /* must clean up this override */
    margin-top: 0 !important;
  }

  .static__about section p:first-of-type {
    /* must clean up this override */
    margin-top: 0 !important;
  }

  .page-selection dialog#dModal_confirmPartialBallot .button-row,
  .page-state dialog#dModal_confirmPartialBallot .button-row {
    flex-direction: column;
    justify-content: center;
  }

  .page-selection dialog#dModal_confirmPartialBallot .button-row button,
  .page-state dialog#dModal_confirmPartialBallot .button-row button {
    width: 18em;
    margin-inline: auto;
    margin-block: 0.4rem;
  }

  .static__partners .static__top-matter--content {
    grid-template-areas: unset;
    grid-template-columns: unset;
  }

  .partners__collection {
    grid-template-columns: repeat(10, 1fr);
  }

  .partners__collection figure:last-child:nth-child(3n) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(4n - 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(3n - 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(3n - 2) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(2n - 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(4n - 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:nth-last-child(2):nth-child(4n + 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:nth-last-child(3):nth-child(4n + 1) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(4n - 3) {
    grid-column-end: unset;
  }

  .partners__collection figure:nth-last-child(2):nth-child(4n + 2) {
    grid-column-end: unset;
  }

  .partners__collection figure:last-child:nth-child(5n - 1) {
    grid-column-end: -7;
  }

  .partners__collection figure:nth-last-child(2):nth-child(5n + 1) {
    grid-column-end: 6;
  }

  .partners__collection figure:nth-last-child(3):nth-child(5n + 2) {
    grid-column-end: 4;
  }

  /* single orphan after a 5-column row */
  .partners__collection figure:last-child:nth-child(5n - 4) {
    grid-column-end: -5;
  }

  /* 3rd of 3 after a 5-column row */
  .partners__collection figure:last-child:nth-child(5n + 3) {
    grid-column-end: -3;
  }

  /* 2nd of 3 after a 5-column row */
  .partners__collection figure:nth-last-child(2):nth-child(5n + 2) {
    grid-column-end: -5;
  }

  /* 1st of 3 after a 5-column row */
  .partners__collection figure:nth-last-child(3):nth-child(5n + 1) {
    grid-column-end: -7;
  }

  /* 4th of 4 after a 5-column row */
  .partners__collection figure:last-child:nth-child(5n + 4) {
    grid-column-end: -2;
  }

  /* 3rd of 4 after a 5-column row */
  .partners__collection figure:nth-last-child(2):nth-child(5n + 3) {
    grid-column-end: -4;
  }

  /* 2nd of 4 after a 5-column row */
  .partners__collection figure:nth-last-child(3):nth-child(5n + 2) {
    grid-column-end: -6;
  }

  /* 1st of 4 after a 5-column row */
  .partners__collection figure:nth-last-child(4):nth-child(5n + 1) {
    grid-column-end: -8;
  }

  /* 5th of 5 in a 5-column row */
  .partners__collection figure:last-child:nth-child(5n) {
    grid-column-end: 11;
  }

  .static__partners header {
    max-width: 50%;
  }

  .static__partners header h2 {
    font-size: 1.4rem;
  }
}

@media (min-width: 1200px) {
  article {
    max-width: 1100px;
    margin-inline: auto;
  }

  .page_entry article.intro {
    width: max-content;
    margin-inline: auto;
  }

  .nav-item {
    /* margin-inline: 0; */
    margin-bottom: 1rem;
  }

  /* .page_entry article.intro {
    color: #FFF;
    grid-template-areas: unset;
    max-width: unset;
    width: 100%;
    grid-template-columns: 1fr 1100px 1fr;
    grid-template-rows: auto auto;
    background:url(img/landbgimage.png) repeat;
    padding-block: 1rem;
  } */

  /* .page_entry article.intro>section {
    grid-column: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
  } */

  /* .page_entry article.intro img {
    display: inline-block;
    width: 420px;
    object-fit: scale-down;
    grid-column: 1;
  } */

  /* .page_entry article.intro h1 {
    font-size: 3.5rem;
    text-transform:uppercase;
    grid-column: 2;
    text-align: left;
    font-weight: 900;
    align-self: center;
    line-height: 1.1;
    margin-top: 2.4rem;
    margin-inline: 0;
  } */

  /* .page_entry article.intro section+section {
    grid-row: 2;
  } */

  .page_entry article.intro p {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
  }

  .wrapper {
    margin-inline: auto;
    max-width: unset;
    max-width: 1100px;
    column-gap: 3rem;
  }

  .announcement,
  .ballot-end {
    margin-inline: 0;
  }

  .page-selection .announcement,
  .page-state .announcement {
    margin-inline: 0;
  }
}