/* YesElections voting release: r300.26.1 */

/* Optional safe-link login welcome dialog. */
#yesSafeLoginModal .modal-dialog {
  width: 95vw;
  max-width: 95vw;
  height: 90vh;
  height: 90dvh;
  min-height: 0;
  margin: 5vh auto;
  margin: 5dvh auto;
}
#yesSafeLoginModal .modal-content {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}
#yesSafeLoginModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 0 auto;
}
#yesSafeLoginModal .modal-header {
  position: relative;
  min-height: 3.5rem;
  flex-shrink: 0;
}
#yesSafeLoginModal .modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
}
#yesSafeLoginModal .yes-login-welcome {
  width: 100%;
  max-width: 48rem;
  padding: 1rem;
  overflow-wrap: anywhere;
}

  :root {
    --bs-primary: #001C8A;
  }
.btn-primary {
  background-color: #001C8A;
  border-color: #001C8A;
}
.yes_topnav {
    background-color: red !important;
    display:none;
}
header {
/*    background-color: blue !important;*/
}
.zoomin, .zoomout {
    margin: 1px;
}
.yes_topnav div{
    max-width: 1024px;
}
.form-signin {
    max-width: 330px;
    padding: 1rem;
}
.loginbtn {
    max-width: 330px;
}
legend.h3, h3.race-title {
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    border-bottom: none;
    margin-bottom: 0;
}
fieldset.race, div.race{
    margin: 1rem 0 !important;
}
    fieldset.race p, div.race p {
        background-color: #f8f9fa;
        padding: 0.5rem 1rem;
        border: 1px solid #dee2e6;
        border-top: none;
        margin: 0 !important;
    }

small{display: block;}

/* Keep candidate photos consistently sized when Choice descriptions vary. */
.candidate-photo {
  flex: 0 0 clamp(88px, 14vw, 140px);
  width: clamp(88px, 14vw, 140px);
}

.candidate-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.candidate-copy {
  min-width: 0;
}

/* Make ballot selections easier to see and activate without enlarging
   credential or navigation controls. */
fieldset.race input[type="checkbox"].form-check-input,
div.race input[type="checkbox"].form-check-input,
.grid-slate-race input[type="checkbox"].form-check-input,
.slate-control input[type="checkbox"].form-check-input,
.survey-grid input[type="checkbox"].form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  border: 2px solid #34495e;
  background-color: #ffffff;
  accent-color: #005a9c;
  cursor: pointer;
}

fieldset.race input[type="checkbox"].form-check-input:checked,
div.race input[type="checkbox"].form-check-input:checked,
.grid-slate-race input[type="checkbox"].form-check-input:checked,
.slate-control input[type="checkbox"].form-check-input:checked,
.survey-grid input[type="checkbox"].form-check-input:checked {
  background-color: #005a9c;
  border-color: #005a9c;
}

fieldset.race input[type="checkbox"].form-check-input:focus,
div.race input[type="checkbox"].form-check-input:focus,
.grid-slate-race input[type="checkbox"].form-check-input:focus,
.slate-control input[type="checkbox"].form-check-input:focus,
.survey-grid input[type="checkbox"].form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 90, 156, 0.25);
}

/* Optional slate layouts; ordinary races retain the r272.26.3 styling above. */

/* YouTube biography modals: fit the viewport and preserve the full 16:9 picture. */
.modal-dialog.modal-youtube {
  width: min(95vw, 960px, 130vh);
  max-width: min(95vw, 960px, 130vh);
}

.modal-youtube .modal-content {
  overflow: hidden;
}

.modal-youtube .modal-body {
  width: 100%;
  padding: 0;
}

.modal-youtube .youtube-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.modal-placeholder {
  min-height: 10rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 355px) {
  .modal-youtube .youtube-player {
    height: 200px;
    aspect-ratio: auto;
  }
}
.slate-control .card {
  border-color: #b9c6d2;
}

.slate-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.slate-control-grid .card {
  margin-bottom: 0 !important;
}

.grid-slate-races {
  border: 1px solid #dee2e6;
  border-bottom: 0;
}

.grid-slate-race {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  border-bottom: 1px solid #dee2e6;
}

.grid-slate-race-name {
  padding: 0.65rem 0.9rem;
  font-weight: 600;
}

.grid-slate-choices {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 60vw;
  overflow-x: auto;
  border-left: 1px solid #dee2e6;
}

.grid-slate-choice {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  min-height: 100%;
  min-width: 5.75rem;
  padding: 0.65rem 0.8rem;
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.grid-slate-race > .race-validation-alert {
  grid-column: 1 / -1;
}

/* For grid slate choices explicitly marked textalign="left", put the
   complete choice column before the nominee/race name. */
.grid-slate-race.grid-slate-choice-left .grid-slate-choices {
  grid-column: 1;
  grid-row: 1;
  border-left: 0;
  border-right: 1px solid #dee2e6;
}

.grid-slate-race.grid-slate-choice-left .grid-slate-race-name {
  grid-column: 2;
  grid-row: 1;
}

.grid-slate-race.grid-slate-choice-left {
  grid-template-columns: max-content minmax(0, 1fr);
}

.grid-slate-choice + .grid-slate-choice {
  border-left: 1px solid #dee2e6;
}

@media (max-width: 575.98px) {
  .grid-slate-race {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .grid-slate-choices {
    border-top: 0;
    border-left: 1px solid #dee2e6;
  }
  .grid-slate-race.grid-slate-choice-left .grid-slate-choices,
  .grid-slate-race.grid-slate-choice-left .grid-slate-race-name {
    grid-row: 1;
  }
  .grid-slate-race.grid-slate-choice-left .grid-slate-choices {
    grid-column: 1;
    border-right: 1px solid #dee2e6;
    border-left: 0;
  }
  .grid-slate-race.grid-slate-choice-left .grid-slate-race-name {
    grid-column: 2;
  }
  .grid-slate-race.grid-slate-choice-left {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}

/* Multiple write-in fields in one Choice align side by side and wrap when needed. */
.writein-fields-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
}
.writein-fields-inline .writein-field {
  flex: 1 1 10rem;
  min-width: 0;
}
.writein-fields-inline .writein-field .form-control {
  width: 100%;
}

/* Separate labels for multi-field write-ins on Ballot Validation/Review. */
.writein-review-field + .writein-review-field {
  margin-left: .75rem;
}

/* Keep formatted Race title content in one flex item, alongside its optional file link. */
.race-title > .race-title-text {
    flex: 1 1 auto;
    min-width: 0;
}
.race-title > a {
    flex-shrink: 0;
}

/* Shared Choice highlight; native checkboxes retain the accessible checked state. */
.yes-choice-card.is-choice-selected,
.grid-slate-choice.is-choice-selected {
    border-color: #245b8a !important;
    background-color: #edf5fc;
    box-shadow: inset 3px 0 0 #245b8a;
}
.yes-choice-card:focus-within {
    outline: 2px solid #245b8a;
    outline-offset: 2px;
}
.yes-writein-choice .candidate-copy {
    min-width: 0;
}

/* Inline HTML embeds. Same-origin content auto-fits; CSS height is the external/no-JS fallback. */
.yes-html-embed { display: block; width: 100%; margin: .75rem 0; }
.yes-html-iframe { display: block; width: 100%; height: var(--yes-html-iframe-height, 24rem); border: 0; }

/* Apportionment is opt-in through the Section input|N marker and APP fields. */
.yes-apportion-choice { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .4rem .5rem; border-bottom: 1px solid #adb5bd; }
.yes-apportion-choice input[type="number"] { width: 100%; min-width: 0; }
.yes-apportion-choice label { font-weight: 600; margin: .3rem 0 0; overflow-wrap: anywhere; }
.yes-apportion-choice .yes-apportion-description { grid-column: 2; }
.yes-apportion-status { font-weight: 600; }
.yes-apportion-status.is-invalid { color: #842029; border-left: .25rem solid currentColor; padding-left: .75rem; }
.yes-apportion-review { font-weight: 700; margin-inline-end: .5rem; }
@media (max-width: 575.98px) { .yes-apportion-choice { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem; } }

/* Non-slate survey matrix: shared desktop headings and labeled mobile options. */
.survey-grid-scroll { max-width: 100%; overflow-x: auto; margin-block: 1rem; }
.survey-grid-scroll:focus-visible { outline: 3px solid #005a9c; outline-offset: 2px; }
.survey-grid { width: 100%; min-width: var(--survey-grid-min-width); table-layout: fixed; border-collapse: collapse; }
.survey-grid-question-column { width: 40%; }
.survey-grid th, .survey-grid td { border: 1px solid #6c757d; }
.survey-grid thead th { text-align: center; background: #f0f2f4; padding: .5rem; vertical-align: bottom; overflow-wrap: anywhere; }
.survey-grid-corner { border: none !important; background: transparent; }
.survey-grid tbody th { text-align: left; vertical-align: middle; padding: .5rem .75rem; background: #f0f2f4; font-weight: 600; overflow-wrap: anywhere; }
.survey-grid tbody td { padding: 0; text-align: center; vertical-align: middle; }
.survey-grid-option { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .75rem; cursor: pointer; width: 100%; }
.survey-grid-option .form-check-input { margin: 0; float: none; flex-shrink: 0; }
.survey-grid-description { font-size: .9em; font-weight: 400; margin-top: .3rem; }
.survey-grid td.is-choice-selected { background: #edf5fc; box-shadow: inset 0 0 0 2px #245b8a; }
.survey-grid td:focus-within { outline: 2px solid #005a9c; outline-offset: -2px; }
.survey-grid-warning-row > td { border: 0; padding: 0; text-align: left; }

.survey-grid-mobile-label { display: none; }
@media (max-width: 767.98px) {
  .survey-grid-scroll { overflow-x: visible; }
  .survey-grid { display: block; min-width: 0; width: 100%; }
  .survey-grid colgroup { display: none; }
  /* Keep header associations available to assistive technology. */
  .survey-grid thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .survey-grid tbody { display: block; width: 100%; }
  .survey-grid .survey-grid-rating-row { display: grid; grid-template-columns: repeat(var(--survey-grid-mobile-columns), minmax(0, 1fr)); margin-top: 1rem; width: 100%; }
  .survey-grid .survey-grid-rating-row > th { display: block; grid-column: 1 / -1; width: auto; }
  .survey-grid .survey-grid-rating-row > td { display: block; min-width: 0; }
  .survey-grid-option { height: 100%; min-height: 4rem; flex-direction: column; gap: .4rem; padding: .6rem .35rem; }
  .survey-grid-mobile-label { display: block; max-width: 100%; font-size: .875rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
  .survey-grid .survey-grid-warning-row, .survey-grid .survey-grid-warning-row > td { display: block; width: 100%; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .survey-grid .survey-grid-rating-row { grid-template-columns: repeat(var(--survey-grid-tablet-columns), minmax(0, 1fr)); }
}

/* Photo races use the configured column count as a maximum. Keep cards at
   least 20rem wide when possible, while letting a single card fit its parent.
   auto-fill retains empty tracks instead of stretching a short final row. */
@supports (container-type: inline-size) and selector(:has(*)) {
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo) {
    --photo-max-columns: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(20rem, calc(100% / var(--photo-max-columns)))), 1fr));
  }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo).row-cols-sm-2 { --photo-max-columns: 2; }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo).row-cols-md-3 { --photo-max-columns: 3; }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo).row-cols-lg-4 { --photo-max-columns: 4; }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo).row-cols-lg-5 { --photo-max-columns: 5; }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo) > .col { width: 100%; min-width: 0; }
  .row:has(> .col > .yes-choice-card > .d-flex > .candidate-photo) > .col[aria-hidden="true"] { display: none !important; }
}

/* Adjust the photo before stacking the content. Queries use each individual
   card's content width, not the browser width. */
.yes-choice-card:has(> .d-flex > .candidate-photo) {
  container-name: candidate-card;
  container-type: inline-size;
}
@container candidate-card (max-width: 30rem) {
  .yes-choice-card > .d-flex > .candidate-photo {
    flex-basis: 96px;
    width: 96px;
  }
}
@container candidate-card (max-width: 24rem) {
  .yes-choice-card > .d-flex > .candidate-photo {
    flex-basis: 72px;
    width: 72px;
  }
}
@container candidate-card (max-width: 16rem) {
  .yes-choice-card > .d-flex:has(> .candidate-photo) {
    display: grid !important;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .5rem;
    width: 100%;
  }
  .yes-choice-card > .d-flex:has(> .candidate-photo) > :first-child {
    grid-column: 1;
    grid-row: 1;
    margin-right: 0 !important;
  }
  .yes-choice-card > .d-flex > .candidate-photo {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, 72px);
    margin-right: 0 !important;
  }
  .yes-choice-card > .d-flex:has(> .candidate-photo) > .candidate-copy {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .yes-choice-card > .d-flex:has(> .candidate-photo) > .candidate-copy > .form-check-label {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}