/* YesElections voting release: r278.26.3 */

/* 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 {
  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 {
  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 {
  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;
}