@font-face{
  font-family:Calibri;
  src:url(../../public-assets/fonts/Calibri.eot);
  src:url(../../public-assets/fonts/Calibri.eot?#iefix) format("embedded-opentype"),url(../../public-assets/fonts/Calibri.woff) format("woff"),url(../../public-assets/fonts/Calibri.ttf) format("truetype"),url(../../public-assets/fonts/Calibri.svg#svgFontName) format("svg")
}

html, body {
  width: 100% !important;
  height: 100% !important;
  font-family: Calibri, Fallback, open-sans;
}

::-webkit-scrollbar {
  width: 15px !important;
}

::-webkit-scrollbar-track{
  border-radius:0;
}
::-webkit-scrollbar-thumb{
  background-color:#393937;
  border:0 solid hsla(0,0%,83.9%,.7);
  border-radius:0
}
::-webkit-scrollbar-corner {
  background: transparent !important;
}

label {
  text-shadow: none !important;
}

@media only screen and (max-width: 1200px) {
  .citizen .terms-conditions {
      width: 100% !important;
  }
  .loaded .citizen .ticker {
      width: 97% !important;
      font-size: 17px !important;
      min-height: 43px !important;
  }
  .width-50.name, .width-50.tel {
      width: 100% !important;
  }

  .width-100.email {
      width: 93% !important;
  }
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable {
  width: 80% !important;
  margin: 0 auto !important;
  z-index: 10000 !important;
}

.scriptLineBreakdown ul {margin-left: -14px;}
p.subgroup {
  margin-top: -37px !important;
  background: #690605;
  padding: 15px 20px;
  text-align: center;
  color: white;
  margin-bottom: -7px;
  width: calc(100% + 22px);
  margin-left: -11px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 21px;
  box-sizing: border-box;
}

body.subscribe-page .ui-dialog-buttonset button:last-Child {
  background: #DDD !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 10px !important;
}

div#thank-you {
  background: #f4f4f4;
  width: calc(91% - 15px) !important;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  padding-bottom: 36px;
  border: 15px solid #FFF;
  font-size: 25px;
  margin-top: 10px !important;
  margin-bottom: 50px !important;
  font-weight: bold;
}

p.thank-you {
  font-size: 32px;
}
body.subscribe-page .ui-dialog-buttonset button:first-Child {
  background: #690605 !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 0px !important;
}
.citizen button.btn.btn-success.btn-subscribe.g-recaptcha {
  width: 100%;
  margin: 0 auto !important;
  margin-top: -10px !important;
  margin-bottom: 50px !important;
  margin-right: 0px !important;
}
body {
  background: url(/public-assets/images/background2.jpg);
  background-position: 0 0;
  background-size: cover;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
}
.group-name {
  font-weight: bolder;
  font-size: 20px;
  margin-top: 10px;
}

.width-100 hr {
  margin-bottom: 16px !important;
}
.width-100.locationTickers {
  margin-top: 15px;
}
.citizen .width-50 {
  float: left;
  width: 48%;
  margin-right: 2%;
}
span.optional, span.required {
  font-size: 11px;
  padding: 5px;
  color: white;
  border-radius: 5px;
  position: relative;
  top: -3px;
}

span.required {
background: #d11232;
font-weight: bold;
}

span.optional {
background: #323436;
font-weight: bold;
}

.form-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 5% auto;
  left: auto;
  position: relative;
}

.citizen {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.citizen .content-window {
background: transparent;
}

.form-header {
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #DDD;
}

.form-body {
  width: 100%;
  height: calc(100% - 90px);
  overflow-y: auto;
  background: #f7f7f7d9;
}

.form-header .title {
  width: 200px;
}

.small {
  font-weight: 500;
  font-size: 16px;
}

.two-split {
  width: 100%;
  height: 100%;
}

.left-side {
  width: 60%;
  float: left;
  height: calc(100% - 150px);
  margin-top: 40px;
  box-sizing: border-box;
}

.right-side {
  width: 40%;
  float: right;
  height: calc(100% - 150px);
  margin-top: 40px;
  box-sizing: border-box;
  text-align: center;
}

.right-side img {
  margin: 0 auto;
  width: 75%;
  margin-top: 15px;
}

.left-side input {
  background: white;
  width: 76%;
  height: 25px;
}

.left-side form {
  padding: 0px 33px;
}

form#subscriber-form .save-settings {
  background: transparent;
  border: 0px !important;
}

input#citizen-area-code {
  width: 34px !important;
  margin-left: 3px;
  margin-right: 3px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

.left-side .text-right.mrg-top-30 {
  float: right;
  margin-bottom: 30px;
  margin-top: 33px;
  margin-right: 43px;
}
button.btn.btn-success.btn-subscribe {
  padding: 12px 25px;
}
div#terms_box {
  text-align: justify;
}

.terms-conditions input {
  width: 14px;
  position: relative;
  top: 5px;
  margin-right: 11px;
}

.terms-conditions {
  float: left;
  margin-top: 36px;
  border: 1px solid #DDD;
  padding: 2px 20px;
  border-radius: 6px;
  background: white;
  cursor: pointer;
      z-index: 9999;
  position: relative;
}

nav#filters, #coordinates, .third-party-logo, #legend {
  display: none;
}

.ui-dialog-buttonset button:first-child {
  float: right;
  background: red;
  color: white;
}

p.additional-info {
  font-size: 12px;
  text-align: justify;
}
p.text-disabled {
  padding: 10px;
  text-align: center;
  background: #6b0808;
  margin: 25px 50px;
  color: white;
}


.help-links {
  text-align: center;
}

.help-links a {
  display: block;
  margin: 10px 0;
  color: #0056b3;
  text-decoration: none;
}

.help-links a:hover {
  text-decoration: underline;
}

.optional {
  font-style: normal;
}

.left-side, .right-side {
  padding: 20px;
  box-sizing: border-box;
}

.width-50.tel {
  width: 48%;
  margin-right: 2%;
}

.width-100.email input,
.width-100.street input {
  width: 100%;
  box-sizing: border-box;
}

.ticker {
  flex: 0 0 calc(50% - 10px);
  margin: 0;
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .left-side, .right-side {
      width: 100%;
      float: none;
  }
  
  .width-50.tel {
      width: 100%;
      margin-right: 0;
      margin-bottom: 15px;
  }
  
  .terms-conditions {
      width: 100%;
      box-sizing: border-box;
      margin: 20px 0;
  }
  
  .ticker {
      flex: 0 0 100%;
  }
  
  .form-wrapper {
      width: 95%;
      left: auto;
  }
}

.citizen label {
  color: black;
  font-weight: bold;
  text-shadow: none !important;
  font-size: 17px !important;
}

.citizen p, .citizen label, .citizen a, .citizen b, .citizen i, .citizen span, .citizen strong, .citizen div, .citizen em, .citizen h1, .citizen h2, .citizen h3, .citizen h4, .citizen h5, .citizen h6 {
  text-shadow: none !important;
}

.citizen label.info {
  background: #dedede;color: black !important;font-size: 16px;padding: 7px;box-sizing: border-box;border-radius: 3px;margin-top: 5px;font-weight: normal;
}

input:focus-within, input:focus-visible {
  border-color: #025ecc !important;
  border-width: 3px !important;
}

#coords-box-1, #coords-box-2, #coords-box-3, #coords-box-4, #coords-box-5 {
  display: none;
}

.alert-count {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}

.description-label, .groupTickers-label, .locationTickers-label {
  background: #4f4f4f;
  color: white !important;
  font-size: 17px !important;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #aeaeae;
  font-weight: 300 !important;
}

.optional, .required {
  position: relative;
  top: -2px;
}

input, option {
  font-size: 16px;
}

div#thank-you p.thank-you {
  color: #d21032;
  font-size: 48px;
}


.citizen .content-window {
  overflow-y: scroll !important;
  height: 100%;
}

.width-100.languageTickers {
    margin-top: -15px;
}

.terms-conditions {
    margin-bottom: -35px;
}

.width-100.languageTickers select {
  width: 50% !important;
  height: 50px !important;
  min-width: 422px;
}

.width-100.groupTickers {
  margin-top: 20px;
}

label {
  text-shadow: none !important;
}
.content-window::-webkit-scrollbar {
    width: 15px !important;
    display: block !important;
}
body {
  background: url(/public-assets/images/background2.jpg) 0 0/cover;
  min-height: 100vh;
}

/* Header Styles */
.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0px;
  z-index: 1000;
  top: 0px;
  background: white;
  box-sizing: border-box;
  padding: 0px 15px;
}

.form-header .subscribe-title {
  text-align: center;
  font-weight: bolder;
  font-size: 20px;
  color: white;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: 0;
  float: right;
  width: 200px;
  margin-right: -3px;
  color: black;
}


/* Welcome Section */
.header-info {
  text-align: center;
  margin-bottom: 2rem;
  padding: 10px;
  /* margin-top: 50px; */
}

.header-info .small {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  margin: auto;
  max-width: 800px;
  width: 80%
}

/* Thank You Message */
#thank-you {
  background: var(--border-color);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  margin: 2rem auto;
}

.thank-you {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Email confirmation step (portal_email_confirmation toggle) — centered card
   matching #thank-you, with a compact one-time-code input. */
#email-confirmation-step {
  background: var(--border-color);
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  margin: 2rem auto;
  width: 90%;
  max-width: 560px;
  box-sizing: border-box;
}

#email-confirmation-step p {
  font-size: 16px;
  line-height: 1.5;
}

#email-confirmation-step .form-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 1.25rem 0;
}

#email-confirmation-step label {
  font-weight: 600;
}

/* The bare `input, select` rule below forces width/height/padding with
   !important — match that here so the code box stays compact. */
#email-confirmation-step #confirmation-code-input {
  width: 230px !important;
  max-width: 100%;
  height: auto !important;
  padding: 10px 12px !important;
  font-size: 28px;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  letter-spacing: 10px;
  /* letter-spacing trails the last digit — re-center the group */
  text-indent: 10px;
  box-sizing: border-box;
}

/* .btn-subscribe is width:100% globally — keep it compact inside the card.
   Centered via the card's text-align (buttons are inline-block). */
#email-confirmation-step #confirmation-code-submit {
  width: auto;
  min-width: 240px;
  max-width: 100%;
}

#email-confirmation-step #confirmation-code-error {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-size: 14px;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  background: #f7f7f79c;
  margin: 0 auto;
}

.subscribe-form li {
  list-style: none;
  padding: 2px;
}

/* Main Layout */
.subscribe-section {
  display: flex;
  width: 93%;
  justify-content: center;
  align-items: start;
  margin: auto;
  gap: 2rem;
  /* padding-bottom: 40px; */
  padding: 0px 20px 40px 20px;
  box-sizing: border-box;
}

.subscribe-inputs {
  width: 70%;
  padding: 19px;
  border: 18px solid white;
  border-radius: 7px;
  box-sizing: border-box;
  background: whitesmoke;
}

.subscribe-info {
  width: 30%;
  vertical-align: top;
}

/* Form Elements */
#subscriber-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-top: 6px;
}

.form-group {
  flex: 1;
  margin-bottom: 4px;
}

label {
  display: block;
  margin-bottom: 6px;
  margin-top: 2px;
}

input, select {
  width: 100% !important;
  padding: 0.75rem !important;
  border: 1px solid #aba6a6 !important;
  border-radius: 4px !important;
  height: 54px !important;
  background: white !important;
  box-sizing: border-box;
}

#subscriber-form .form-group {
  margin-bottom: 12px !important;
}

#subscriber-form .form-row {
  margin-bottom: 10px !important;
}

#subscriber-form input[type="text"],
#subscriber-form input[type="email"],
#subscriber-form input[type="tel"],
#subscriber-form select {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Language Selection */
.ticker-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: white;
  padding: 18px 15px;
  margin-top: -5px;
}

.ticker {
  flex: 1 1 calc(50% - 0.5rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #ccd6d6;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-wrap: auto;
  overflow-wrap: break-word;
  text-wrap-style: pretty;
  min-width: 250px;
  font-size: 19px;
}

.ticker input[type="checkbox"] {
  width: auto;
  height: auto;
  margin: 0;
}

.ticker.selected {
  background: #d11332;
  color: white;
}

.ticker:hover {
  background: #4f4f4f;
  color: white;
}

.ticker input {
  width: 14px !important;
  text-align: left;
  margin-top: 6px;
  position: relative;
  top: 1px;
  margin-right: 10px !important;
  height: auto !important;
}

.ticker i {
  margin-right: 8px;
}

/* The preferred-language tickers are single-select radios whose input, icon,
   and label sit directly inside the flex-centered .ticker. The shared
   `.ticker input` rule above nudges checkboxes down (margin-top/top) to line up
   with wrapped checkbox rows, but here it knocks the radio off the centerline —
   reset those offsets so the radio is vertically centered with its label. */
.language-ticker input[type="radio"] {
  margin-top: 0;
  top: 0;
}

/* Terms and Submit */
.terms-conditions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin: 1rem 0;
}

.terms-conditions input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
}

.btn-subscribe {
  width: 100%;
  padding: 1rem !important;
  background: #d11232 !important;
  color: white !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.btn-subscribe:hover {
  background: #8b0a08;
}

/* Right Side Content */
.privacy-notice, .unsubscribe-info, .address-info, .update-subscribe-info {
  background: white;
  padding: .1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.help-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: auto;
  margin-bottom: 20px;
}

.help-links a {
  color: #0056b3;
  text-decoration: none;
}

.help-links a:hover {
  text-decoration: underline;
}

/* Dialog Styles */
.ui-dialog {
  width: 80% !important;
  max-width: 600px;
  margin: 0 auto !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.ui-dialog-buttonset button:first-child {
  background: var(--success-color);
  color: white;
  border-radius: 0 10px 10px 0;
}

.ui-dialog-buttonset button:last-child {
  background: var(--border-color);
  border-radius: 10px 0 0 10px;
}

/* Address Tabs */
.address-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  /* margin-bottom: 1rem; */
}

.address-tab {
  padding: 0.5rem .5rem;
  background: var(--border-color);
  /* border-radius: 4px; */
  /* border-radius: 4px; */
  cursor: pointer;
  transition: all 0.2s;
  user-select: none; /* Prevents text selection when clicking */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: black;
  border: 1px solid #323436;
}

.address-tab.active {
  background: #d11232;
  color: white;
  border-bottom-left-radius: 0px;
}

.address-panel {
  display: none;
}
.address-panel.active {
    padding: 18px;
    border: 1px solid #3d4b5b;
    border-radius: 5px;
    border-top-left-radius: 0px;
}
.address-panel.active {
  display: block;
}

ol {
    margin-left: -30px;
}

ul {
    margin-left: -25px;
}

/* Responsive Design */
@media only screen and (min-width: 1100px) {
  .header-notice {
      padding-bottom: 34px !important;
  }
  .header-notice .header-notice-body {
    padding-top: 16px;
    padding-left: 100px !important;
    line-height: 20px !important;
  }
  .header-info {
    /* margin-top: 70px; */
  }
   
}

/* Responsive Design */
@media only screen and (max-width: 1600px) {
  .subscribe-form {
    width: 85%;
  }
  button.address-tab {
    width: 61px;
    font-size: 13px;
    padding: 5px 0px;
  }
  .width-100.languageTickers select {
    width: 100% !important;
    min-width: auto !important;
  }
}

/* Responsive Design */
@media only screen and (max-width: 1200px) {

  .header-info {
    margin-top: 70px;
    margin-bottom: 55px;
  }

  .subscribe-form {
    width: 100%;
  }

  .eapps-widget {
    margin: 0 auto !important;
    float: none !important;
    margin-top: -30px !important;
    margin-bottom: 15px !important;
   }

  .form-header {
    width: 100%;
    border-radius: 0px !important;
  }
  .subscribe-section {
    flex-direction: column;
    padding: 0px
  }

  .form-row {
    flex-direction: column;
  }

  .subscribe-inputs {
    width: 100%;
    margin: 0 auto;
    
  }

  .subscribe-info {
    margin-top: -21px;
    width: 100%;
    margin-left: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .subscribe-form {
    width: 100%;
    margin: auto;
  }
}

.terms-conditions {
  margin-bottom: -25px;
}

.group-box {
  margin-top: 18px;
}

.languageTickers-header-box {
  margin-top: 15px;
}

.subscription-info ol {
  padding-bottom: 25px;
}

.county-warning {
  background-color: #d11232;
  color: #856404;
  padding: 10px 20px;
  margin-top: 5px;
  border-radius: 7px;
  border-left: 0;
  font-size: 14px;
  margin-bottom: 22px;
  color: white;
  font-size: 19px;
}

.county-warning i {
  margin-right: 5px;
}

button.address-tab:hover {
  background: #ccd7d6;
  color: black !important;
}

button.address-tab.active:hover {
  background: #2d3640;
}

div#__EAAPS_PORTAL a[style] {
  display: none !important;
  width: 0px !important;
  overflow: hidden !important;
}

/* Responsive Design */
@media only screen and (max-width: 1200px) {
 .eapps-widget {
  margin: 0 auto !important;
  float: none !important;
  margin-top: -30px !important;
  margin-bottom: 15px !important;
 }
}

.eapps-widget {
  /* float: right; */
  margin-right: 20px;
  margin-top: -40px;
  margin-bottom: -40px;
  border: 1px solid #DDD;
  border-radius: 10px;
  height: 35px;
  /* position: absolute !important; */
  /* right: 0px !important; */
  top: -11px;
  left: unset;
  width: 110px;
  margin: 0 auto;
}

.eapps-widget a {
  width: 0px;
  overflow: hidden;
}

.eapps-widget .eapps-widget-toolbar,
.eapps-widget.eapps-widget-toolbar {
  display: none !important;
}

div.eapps-widget a + div div {
  left: 10px;
}

.groupTickers-header-box {
  margin-top: 50px;
}

button#add-email-btn, button#add-phone-btn, button#add-mobile-btn {
  float: right;
  margin-top: 8px;
  margin-bottom: 10px;
  background: #d11332;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  border: none;
  position: relative;
  right: 0px;
}

div#additional-emails-container {
  margin-top: 10px;
  clear: both;
}

span.input-group-btn {
  float: right;
  margin-top: -55px;
  z-index: 99999;
  position: relative;
  margin-right: 10px;
}

.form-group.additional-email button.remove-email, .form-group.additional-phone button.remove-phone, .form-group.additional-mobile button.remove-mobile {
  border: none;
  background: #4f4f4f;
  border-radius: 4px;
  padding: 4px 8px;
  color: white;
}

.form-group.additional-email button.remove-email .fa, .form-group.additional-phone button.remove-phone .fa, .form-group.additional-mobile button.remove-mobile .fa {
  margin-right: 0px;
}

.form-group.additional-email button.remove-email:hover, .form-group.additional-phone button.remove-phone:hover, .form-group.additional-mobile button.remove-mobile:hover {
  background: #d11332;
  cursor: pointer;
  border-radius: 4px;
  border: none;
}

button#add-email-btn:hover, button#add-phone-btn:hover, button#add-mobile-btn:hover {
  background: #4f4f4f;
}

button.address-tab .required {
  background: #d60808;
}

button.address-tab .required, button.address-tab .optional {
  top: -1px;
  margin-left: 3px;
}

#additional-mobile-container, #additional-emails-container, #additional-phone-container {
  background: white;
  margin-top: 35px;
  /* padding: 5px 13px; */
  margin-bottom: 15px;
  border-radius: 7px;
  box-sizing: border-box;
  border: 1px solid #3d4b5b;
  clear: both;
}

.additional-mobile input, .additional-email input, .additional-phone input {
    margin-bottom: 14px;
}

.additional-mobile, .additional-email, .additional-phone {
    padding-top: 12px;
    margin: 5px 13px;
}

.citizen img.toolbar-logo {
    height: 70px !important;
    width: auto !important;
    margin-top: 10px !important;
}

section.subscribe-section ol {
    font-size: 17px;
}


.header-notice {
  margin: 0 auto;
  margin-bottom: 7px;
  background: #f4f4f4;
  width: calc(91% - 15px) !important;
  border-radius: 5px;
  padding: 18px;
  text-align: left;
  position: relative;
  margin-top: 20px;
  font-size: 17px;
  font-weight: bold;
  box-sizing: border-box;
  border: 17px solid #FFF;
}

.header-info .big {font-size: 2rem;color: #d21033;font-weight: bold !important;margin-bottom: 0;text-align: center;}

.medium {
  margin-top: -15px;
  font-size: 22px;
  font-weight: bold;
  color: #4c3a39;
  width: 75%;
  margin: 0 auto;
}
i.fa.fa-question-circle, i.fa.fa-exclamation-circle {
  float: left;
  font-size: 4em;
  margin-right: 11px;
  color: #d11232;
}

.subscription-info {
    margin-top: -25px;
}

h3 {
    font-size: 22px;
}

.fa {
    margin-right: 7px;
}

button.address-tab.active:hover {
  background: #d11232 !important;
  color: white !important;
  border-color: #000000 !important;
}

i.fa.fa.fa-bullhorn {
  font-size: 25px;
  background: #d11232;
  color: white;
  padding: 15px 16px 15px 16px;
  border-radius: 73px;
  float: left;
  margin-right: 26px;
}

/* Subscribe-page intro notice: flex layout (float is ignored on flex items)
   with the portal description centered beside the bullhorn. Scoped with
   .portal-intro so the mobile-login and verified-banner notices keep their
   left-aligned layout. */
.header-notice.portal-intro {
  display: flex;
  align-items: center;
}

.header-notice.portal-intro .header-notice-body {
  flex: 1;
  text-align: center;
  /* cancel the desktop-media 100px float-clearing indent — flex handles the
     icon, and the indent would skew the centering */
  padding-left: 0 !important;
}

.width-50.languageTickers {
  margin-top: -22px;
}

.width-50.languageTickers select {
  font-size: 16px !important;
}

.scriptLineBreakdown.subscribe-details li {font-weight: 100;}

.scriptLineBreakdown.subscribe-details li b {
    font-weight: 800;
    margin-left: -18px;
}
select.citizen-state {
  border-radius: 5px !important;
  border: 1px solid #807b7b !important;
  background: whitesmoke !important;
}
.county-warning.green {
  background-color: green;
}

.county-warning.yellow {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.scriptLineBreakdown.subscribe-details li {
    margin-left: -10px;
    padding-left: 20px;
}

@media screen and (max-width: 1200px) {
 .subscribe-page .help-links {
    padding-bottom: 50px;
 }  
}

.geo-loader {
  font-weight: bold;
  width: 100%;
  background: #dbdbdb;
  padding: 20px;
  padding-top: 40px;
  box-sizing: border-box;
  border-radius: 4px;
}

.geo-loader .loading-spinner {
  margin-top: -22px;
  margin-right: 20px;
}

/* ==========================================
   AFN Form Styles
   ========================================== */

.afn-section {
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.afn-section-header {
  background: #4f4f4f;
  color: white;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.afn-section-header:hover {
  background: #3a3a3a;
}

.afn-section-header i:first-child {
  margin-right: 8px;
}

.afn-chevron {
  transition: transform 0.2s;
}

.afn-section-body {
  padding: 16px;
  border-top: 1px solid #ccc;
}

.afn-checkbox-group {
  margin-bottom: 16px;
}

.afn-checkbox-group > label {
  margin-bottom: 8px;
}

.afn-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.afn-checkbox-label {
  font-weight: normal !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 0;
}

.afn-checkbox-label input[type="checkbox"] {
  margin-right: 4px;
}

.afn-vehicle-block,
.afn-ec-block,
.afn-animal-block {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fafafa;
}

.afn-vehicle-block strong,
.afn-ec-block strong,
.afn-animal-block strong {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

#afn-add-animal {
  background: #d11332;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

#afn-add-animal:hover {
  background: #4f4f4f;
}

@media only screen and (max-width: 768px) {
  .afn-checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   AFN Form Toggle (Connected Button Group)
   ========================================== */

.afn-form-toggle {
  display: flex;
  margin-bottom: 24px;
}

.afn-toggle-btn {
  flex: 1;
  padding: 13px 16px;
  border: 2px solid #4f4f4f;
  background: #f0f0f0;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #4f4f4f;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  outline: none;
}

.afn-toggle-btn:first-child {
  border-radius: 6px 0 0 6px;
  border-right: 1px solid #4f4f4f;
}

.afn-toggle-btn:last-child {
  border-radius: 0 6px 6px 0;
  border-left: 1px solid #4f4f4f;
}

.afn-toggle-btn.active {
  background: #d11232;
  color: white;
  border-color: #d11232;
}

.afn-toggle-btn:hover:not(.active) {
  background: #ddd;
}

@media only screen and (max-width: 768px) {
  .afn-toggle-btn {
    font-size: 14px;
    padding: 10px 8px;
  }
}

/* Group info button + inline description panel */
.ticker {
  flex-wrap: wrap;
}

.ticker .ticker-row {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ticker .ticker-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ticker .group-info-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: 0 0 0 auto;
  cursor: pointer;
  color: #555;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.ticker .group-info-btn:hover,
.ticker .group-info-btn:focus {
  color: #111;
}

.ticker.selected .group-info-btn,
.ticker:hover .group-info-btn {
  color: inherit;
}

.ticker .group-description-panel {
  flex: 1 0 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  font-size: 15px;
  border-radius: 3px;
  cursor: default;
  overflow-wrap: break-word;
}

.ticker .group-description-panel[hidden] {
  display: none;
}

/* Employee portal — email domain mismatch */
.employee-domain-error {
    border: 2px solid #c00 !important;
    background: #fff5f5 !important;
}

/* ==========================================
   Employee Subscribe — Gated Form (/employee-subscribe)
   ========================================== */

/* Reuse the .header-notice frame but recolor for a "verified" success state */
.header-notice.verified-banner {
    background: #f4faf6;
    border: 17px solid #FFF;
    box-shadow: inset 0 0 0 1px #cfe6d6;
}

.header-notice.verified-banner i.fa.fa-check-circle {
    font-size: 25px;
    background: #2a8a3d;
    color: white;
    padding: 15px 16px;
    border-radius: 73px;
    float: left;
    margin-right: 26px;
    margin-top: 2px;
}

.header-notice.verified-banner .header-notice-title {
    color: #1a5d2a;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.header-notice.verified-banner .header-notice-body {
    color: #1a5d2a;
    font-weight: 600;
}

.header-notice.verified-banner .verified-email {
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    background: #ffffff;
    color: #1a5d2a;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid #cfe6d6;
    font-weight: 700;
}

@media only screen and (min-width: 1100px) {
    .header-notice.verified-banner {
        padding-bottom: 34px !important;
    }
    .header-notice.verified-banner .header-notice-body {
        padding-top: 16px;
        padding-left: 100px !important;
        line-height: 22px !important;
    }
}

/* "Employee" pill that appears next to employee-only group tickers */
.employee-only-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px 9px;
    background: #2b6cb0;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: 999px;
    line-height: 1;
}

.ticker.selected .employee-only-badge {
    background: #ffffff;
    color: #2b6cb0 !important;
}

/* Language select on the gated form gets the same height as inputs */
.emp-language-select select {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Compact footer when shown on gated form */
.employee-subscribe-page .portal-footer {
    text-align: center;
    margin: 16px auto 0;
    font-size: 13px;
    color: #4f4f4f;
}

/* Keep selected group/location tickers red on the gated employee form,
   even while the cursor is over them — the global .ticker:hover rule
   would otherwise paint them grey for as long as the user hovers. */
.employee-subscribe-page #emp-groups-list .ticker.selected,
.employee-subscribe-page #emp-locations-list .ticker.selected,
.employee-subscribe-page #emp-groups-list .ticker.selected:hover,
.employee-subscribe-page #emp-locations-list .ticker.selected:hover {
    background: #d11332;
    color: white;
}

/* Cancel the global negative margin-bottom overrides on .terms-conditions
   (Marin-portal layout hack) so the submit button isn't pulled up under
   the terms box on the employee subscribe page. */
.employee-subscribe-page .terms-conditions {
    margin-bottom: 1rem;
}

/* ------------------------------------------------------------------
   Temporary (Event) QR signup — scoped polish
   The "Use my current location" control reuses .terms-conditions.ticker,
   which inherits the always-red `.ticker.selected` look — so it rendered
   as a saturated-red block stacked directly on the red Sign Up button,
   and looked "on" even when the checkbox was unchecked. Calm it to a
   neutral, optional-looking toggle, reflect the real checkbox state, and
   give it breathing room above the Sign Up button.
------------------------------------------------------------------ */
/* The form is the section's only flex child and has no width of its own.
   At ≤1200px .subscribe-section flips to flex-direction: column while
   keeping `align-items: start`, so the form shrink-wrapped to its intrinsic
   content width and pinned to the left edge — leaving dead space on the
   right and forcing the "Subscribe for [N] days" row to wrap onto three
   lines. Give it the full section width, capped and centered on desktop. */
#qr-event-section #qr-event-form {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

#qr-event-section .terms-conditions.ticker {
    /* Neutralize the legacy base .terms-conditions float/z-index hack —
       the floated toggle left normal flow and painted over the Sign Up
       button (visible on mobile where .citizen forces it full-width). */
    float: none;
    position: static;
    z-index: auto;
    /* !important needed to beat `.loaded .citizen .ticker { width: 97% !important }` */
    width: auto !important;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 0.6rem;
    min-width: 0;
    margin: 0.75rem 0 1.5rem;
    padding: 0.85rem 1rem;
    background: #f5f7f7;
    color: #2c3333;
    border: 1px solid #ccd6d6;
    border-radius: 6px;
    font-size: 16px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#qr-event-section .terms-conditions.ticker:hover {
    background: #eef1f1;
    border-color: #b7c4c4;
    color: #2c3333;
}

/* The whole toggle is a <label for=…>, so clicking anywhere in the box
   (padding included) checks the box natively — no JS needed. */
#qr-event-section .qr-event-location-toggle {
    cursor: pointer;
}

#qr-event-section .qr-event-location-text {
    margin: 0;
    font-weight: 500;
}

/* "Subscribe for [ N ] day(s)" — make the default duration explicit and
   keep the inline dropdown from being stretched to 100% by the global
   `input, select` rule. */
#qr-event-section .qr-event-duration-group {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    background: #f5f7f7;
    border: 1px solid #ccd6d6;
    border-radius: 6px;
}

#qr-event-section .qr-event-duration-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #2c3333;
}

#qr-event-section .qr-event-duration-label select {
    width: auto !important;
    min-width: 72px;
    height: 44px !important;
    margin: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 16px;
}

#qr-event-section .qr-event-duration-static {
    margin: 0.75rem 0 1rem;
    font-size: 16px;
    color: #2c3333;
}

#qr-event-section .terms-conditions.ticker input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    top: 0;
    accent-color: #d11232;
    cursor: pointer;
}

/* Reflect the actual checkbox state instead of the hardcoded `selected`
   class: tint to brand red only while the box is genuinely checked. */
#qr-event-section .terms-conditions.ticker:has(#qr-event-use-location:checked) {
    background: #fdeaed;
    border-color: #d11232;
    color: #7a0a1d;
}

/* Sign Up: keep the brand red, but add separation from the toggle above
   and a touch more weight/rounding so it reads as the primary action.
   display:block + clear:both keep it in normal flow below the controls
   even if a legacy float sneaks back in above it. */
#qr-event-section .btn-subscribe {
    display: block;
    clear: both;
    margin-top: 0.25rem;
    padding: 0.9rem 1rem !important;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

/* Phone tier: comfortable stacking and touch targets. */
@media only screen and (max-width: 768px) {
    /* Base .subscribe-section is 93% wide — on a phone use the full screen
       width, with padding (border-box) providing the side gutters. */
    #qr-event-section.subscribe-section {
        width: 100%;
        padding: 0 14px 32px;
    }

    #qr-event-section .qr-event-duration-group {
        width: 100%;
        box-sizing: border-box;
        margin: 0.5rem 0 1rem;
    }

    #qr-event-section .terms-conditions.ticker {
        margin: 0.5rem 0 1.25rem;
        padding: 1rem;
    }

    #qr-event-section .btn-subscribe {
        margin-top: 0.5rem;
        padding: 1rem !important;
        font-size: 1.1rem;
    }
}

/* === Hide-labels mode (admin setting: portal_hide_labels) ====================
   When the admin enables "Hide Labels Until Hover", <body> carries
   .pp-hide-labels (set server-side in index-public.ejs). The secondary helper /
   description text on the subscribe page collapses until the subscriber hovers,
   keyboard-focuses, or taps the related section. Primary field labels and the
   options themselves stay visible so the form is always usable. When the
   setting is off the class is absent and nothing here applies — the page looks
   exactly as before. !important is required to beat the inline padding/margin
   styles the Spanish template puts on its description labels. */
body.pp-hide-labels .description-label,
body.pp-hide-labels .groupTickers-label,
body.pp-hide-labels .locationTickers-label,
body.pp-hide-labels .languageTickers-label {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease,
                padding 0.3s ease, margin 0.3s ease;
}

/* Lists (e.g. the "How to Subscribe" steps) keep their left padding so the
   numbers aren't clipped — only vertical space and visibility collapse. */
body.pp-hide-labels .subscription-info ol {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}

/* Reveal a section's helper text on hover / keyboard focus / tap. .pp-revealed
   is toggled by initHideLabels() for touch taps and for the ticker sections,
   whose description sits in a *-header-box above the options the user touches. */
body.pp-hide-labels .form-group:hover .description-label,
body.pp-hide-labels .form-group:focus-within .description-label,
body.pp-hide-labels .form-group.pp-revealed .description-label,
body.pp-hide-labels .groupTickers-header-box:hover .groupTickers-label,
body.pp-hide-labels .groupTickers-header-box:focus-within .groupTickers-label,
body.pp-hide-labels .groupTickers-header-box.pp-revealed .groupTickers-label,
body.pp-hide-labels .locationTickers-header-box:hover .locationTickers-label,
body.pp-hide-labels .locationTickers-header-box:focus-within .locationTickers-label,
body.pp-hide-labels .locationTickers-header-box.pp-revealed .locationTickers-label,
body.pp-hide-labels .languageTickers-header-box:hover .languageTickers-label,
body.pp-hide-labels .languageTickers-header-box:focus-within .languageTickers-label,
body.pp-hide-labels .languageTickers-header-box.pp-revealed .languageTickers-label {
    max-height: 60em !important;
    opacity: 1 !important;
    pointer-events: auto;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body.pp-hide-labels .subscription-info:hover ol,
body.pp-hide-labels .subscription-info.pp-revealed ol {
    max-height: 60em !important;
    opacity: 1 !important;
    pointer-events: auto;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}