/* COVID INTRO TEXT */
.covid-intro-text {
  margin: 0 auto;
  width: 100%;
  max-width: 900px;
}

.covid-intro-text span {
  display: block;
  font-size: 30px;
  line-height: 30px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.covid-intro-text h2 {
  font-size: 24px !important;
  line-height: 32px !important;
  text-transform: unset;
  margin-bottom: 40px;
  font-weight: 400;
}

.covid-intro-text p {
  font-size: 14px;
  line-height: 18px;
  margin: 15px auto 0;
  width: 100%;
  max-width: 290px;
}

@media (min-width: 768px) {
  .covid-intro-text span {
    font-size: 48px !important;
    line-height: 48px !important;
  }

  .covid-intro-text h2 {
    margin-bottom: 45px;
  }
}

/* eBRC FORM */
.ebrc-form-section {
  position: relative;
  padding: 45px 30px;
  background: #221F20;
}
@media (min-width: 768px) {
  .ebrc-form-section {
    padding: 90px 30px;
  }
}

.ebrc-form-section .ebrc-container {
  margin: 0 auto;
  max-width: 900px;
}

.ebrc-form-section.needs-height-adjustment {
  height: calc(100vh - 31.555vw);
  overflow: hidden;
}

@media (min-width: 768px) {
  .ebrc-form-section.needs-height-adjustment {
    height: calc(100vh - 5.5rem);
  }
}

.ebrc-form-section .during-submission-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ebrc-form-section .during-submission-content svg {
  width: 5rem;
  height: 5rem;
  animation: rotate 1s linear infinite;
}

.ebrc-form-section a {
  color: white;
  text-decoration: underline;
}
.ebrc-form-section label a:hover {
  text-decoration: none;
}

.ebrc-form-section form {
  display: flex;
  flex-wrap: wrap;
}

.ebrc-form-section form > div {
  margin: 0 0 20px 0;
}
.ebrc-form-section form > div.form-description {
  margin: 25px 0 15px; 
} 
@media (min-width: 768px) {
  .ebrc-form-section form > div {
    margin: 0 20px 15px 0;
  }
}

.ebrc-form-section .form-field {
  position: relative;
  width: 100%;
}

.ebrc-form-section .form-description p {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}

@media (min-width: 768px) and (max-width: 947px) {

  .ebrc-form-section .form-field--text {
    width: calc(33.333% - 20px);
  }
  .ebrc-form-section .form-field--text:nth-of-type(-n+2) {
    width: calc(50% - 20px);
  }
  .ebrc-form-section .form-field--text:nth-of-type(2),
  .ebrc-form-section .form-field--text:nth-of-type(4),
  .ebrc-form-section .form-field--text:nth-of-type(6) {
    margin-right: 0;
  }
  .ebrc-form-section .form-field--text:nth-of-type(-n+5):nth-of-type(n+4) {
    width: calc(66.666% - 20px);
  }
}

@media (min-width: 948px) {
  .ebrc-form-section .form-field--text:nth-of-type(-n+2),
  .ebrc-form-section .form-field--text:nth-of-type(4),
  .ebrc-form-section .form-field--text:nth-of-type(5) {
    width: calc(33.3% - 20px);
  }
  .ebrc-form-section .form-field--text:nth-of-type(3n) {
    width: calc(33.3% - 20px);
    margin-right: 0;
  }
}

.ebrc-form-section .form-radio-group {
  margin-top: 25px;
}

@media (min-width: 768px) {
  .ebrc-form-section .form-radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

.ebrc-form-section .form-radio-group .form-field {
  margin-bottom: 22px;
}

@media (min-width: 768px) {
  .ebrc-form-section .form-radio-group .form-field {
    margin-bottom: 17px;
  }
}

.ebrc-form-section .form-radio-group.has-error {
  color: #BE271B;
}

.ebrc-form-section .form-radio-group.has-error .errors {
  display: block;
  position: static;
}

.ebrc-form-section .form-radio-group.has-error * {
  border-color: currentColor;
  color: currentColor;
  stroke: currentColor;
}

.ebrc-form-section .form-radio-group .errors {
  padding-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1;
  position: absolute;
  top: 100%;
  display: none;
  color: #BE271B;
}

.ebrc-form-section .form-radio-group .errors ul {
  padding: 0;
  list-style: none;
}

.ebrc-form .local-mac-code .form-radio-group {
  display: none;
}

.ebrc-form .ebrc-form-section .local-mac-code .form-field--checkbox {
  width: 100%;
}

.ebrc-form-section .form-field label {
  display: block;
}

.ebrc-form-section .form-field .errors {
  padding-top: 2px;
  font-size: 10px;
  position: absolute;
  top: 100%;
  display: none;
}

.ebrc-form-section .form-field .errors ul {
  padding: 0;
  list-style: none;
}

.ebrc-form-section .form-field--text {
  background: #221F20;
  color: #D5D5D7;
}

.ebrc-form-section .form-field--text label {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 14px;
  line-height: 18px;
}

.ebrc-form-section .form-field--text label>* {
  margin-left: 0.25rem;
  color: #8D8D8D;
  opacity: 1;
  transition: opacity 0.125s linear;
}

.ebrc-form-section .form-field--text label>*:empty {
  opacity: 0;
}

.ebrc-form-section .form-field--text input {
  border: 1px solid #D5D5D7;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background: #221F20;
  padding: 1.5rem 0.5rem 0.5rem 0.5rem;
  color: white;
  width: 100%;
}

.ebrc-form-section .form-field--text input:-webkit-autofill {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #151515 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.ebrc-form-section .form-field--text ::-webkit-input-placeholder {
  color: #D5D5D7;
}

.ebrc-form-section .form-field--text ::-moz-placeholder {
  color: #D5D5D7;
}

.ebrc-form-section .form-field--text :-ms-input-placeholder {
  color: #D5D5D7;
}

.ebrc-form-section .form-field--text :-moz-placeholder {
  color: #D5D5D7;
}

.ebrc-form-section .form-field--text.has-error {
  color: #BE271B;
}

.ebrc-form-section .form-field--text.has-error .errors {
  display: block;
}

.ebrc-form-section .form-field--text.has-error * {
  border-color: currentColor;
  color: currentColor;
  stroke: currentColor;
}

.ebrc-form-section .form-field--text.has-error ::-webkit-input-placeholder {
  color: currentColor;
}

.ebrc-form-section .form-field--text.has-error ::-moz-placeholder {
  color: currentColor;
}

.ebrc-form-section .form-field--text.has-error :-ms-input-placeholder {
  color: currentColor;
}

.ebrc-form-section .form-field--text.has-error :-moz-placeholder {
  color: currentColor;
}

.ebrc-form-section .form-field--text div {
  position: relative;
}


.ebrc-form-section .form-field--choice label {
  cursor: pointer;
  padding-left: 28px;
  font-size: 18px;
  line-height: 24px;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.ebrc-form-section .form-field--choice svg {
  position: absolute;
  width: 18px;
  height: 18px;
}

.ebrc-form-section .form-field--radio svg {
  top: calc(50% - 10px);
}

.ebrc-form-section .form-field--choice .has-selection {
  opacity: 0;
  transition: opacity 0.125s;
}

.ebrc-form-section .form-field--choice input {
  position: absolute;
  left: -999rem;
}

.ebrc-form-section .form-field--choice input:focus+svg {
  outline-color: #FFCC01;
  outline-style: auto;
  outline-width: 3px;
}

.ebrc-form-section .form-field--choice input:checked+svg .has-selection {
  opacity: 1;
}

/* .The outline of radio buttons */
.ebrc-form-section .form-field--radio circle:not(.has-selection) {
  stroke: #221f20;
}
/* .The outline of radio buttons on dark bg */
.ebrc-form-section.dark .form-field--radio circle:not(.has-selection) {
  stroke: #FFFFFF;
}
/* .The outline of radio buttons on dark bg when checked */
.ebrc-form-section.dark .form-field--radio input:checked + svg circle:not(.has-selection) {
  stroke: #FFCC01;
}
/* .The circle that fills radio buttons when checked */
.ebrc-form-section .form-field--radio .has-selection {
  fill: #221F20;
}
/* .The circle that fills radio buttons when checked on dark bg */
.ebrc-form-section.dark .form-field--radio .has-selection {
  fill: #FFCC01;
}

.ebrc-form-section .form-field--checkbox {
  margin-bottom: 20px;
}

/* .The checkboxes when checked */
.ebrc-form-section .form-field--checkbox .has-selection rect {
  fill: #000;
}

/* The checkboxes on dark bg when checked */
.ebrc-form-section.dark .form-field--checkbox .has-selection rect {
  fill: #FFCC01;
}

/* .The outline on dark bg when NOT checked */
.ebrc-form-section.dark .form-field--checkbox rect:not(.has-selection > rect) {
  stroke: #fff;
}
/* The outline of checkboxes when checked */
.ebrc-form-section.dark .form-field--checkbox input:checked + svg rect:not(.has-selection > rect) {
  stroke: #FFCC01;
}

.ebrc-form-section .form-field--checkbox rect:not(.has-selection > rect) {
  stroke: #000;
}
/* checkmark on light bg */
.ebrc-form-section .form-field--checkbox .has-selection polyline {
  stroke: white;
}
/* checkmark on dark bg */
.ebrc-form-section.dark .form-field--checkbox .has-selection polyline {
  stroke: #221F20;
}

@media (max-width: 767px) {
  .ebrc-form-section .form-submit {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .ebrc-form-section .form-submit {
    flex: 0 0 auto;
    margin-right: 13px;
    align-self: center;
  }
}

.ebrc-form-section .form-submit button {
  background: #FFCC01;
  color: #221F20;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 21px;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  transition: color 0.125s, background 0.125s;
}

@media (max-width: 767px) {
  .ebrc-form-section .form-submit button {
    width: 100%;
    text-align: center;
  }
}

.ebrc-form-section .form-submit button:focus {
  background: transparent;
  color: #FFCC01;
}

.ebrc-form-section .form-submit button:focus::before {
  opacity: 1;
}

.ebrc-form-section .form-submit button:active {
  color: #FFCC01;
}

.ebrc-form-section.light .form-submit button[disabled] {
  background: #BFB8A6 !important;
  color: #727365 !important;
  cursor: not-allowed;
}

.ebrc-form-section.dark .form-submit button[disabled] {
  background: #565557 !important;
  color: #d5d5d7 !important;
  cursor: not-allowed;
}

.ebrc-form-section .form-submit button[disabled]::before {
  opacity: 0 !important;
}

@media (hover: hover) {
  .ebrc-form-section .form-submit button:hover {
    background: white;
    color: #221F20;
  }
  .ebrc-form-section.light .form-submit button:hover {
    background: white;
    color: #221F20;
  }
}

@media (hover: hover) {
  .ebrc-form-section .form-submit button:hover::before {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .ebrc-form-section .form-privacy-notice {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .ebrc-form-section .form-privacy-notice {
    flex: 1;
  }
}

.ebrc-form-section .form-privacy-notice p {
  font-size: 14px;
  line-height: 18px;
}
.ebrc-form-section .form-privacy-notice p a:hover {
  text-decoration: none;
}
.ebrc-post-form-steps {
  padding-bottom: calc(4.5rem * 0.625);
  padding-bottom: calc(var(--ebrc-section-padding) * 0.625);
}

.ebrc-post-form-steps h4 {
  font-size: 18px;
  line-height: 25px;
}

@media (min-width: 768px) {
  .ebrc-post-form-steps h4 {
    margin-right: 60px;
    text-align: left;
  }
}

.ebrc-post-form-steps ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ebrc-post-form-steps .next-header li {
  counter-increment: post-form-steps;
  display: flex;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .ebrc-post-form-steps li {
    margin-top: 1rem;
    padding-right: 10px;
  }
}

@media (min-width: 768px) {
  .ebrc-post-form-steps li {
    align-items: center;
  }
}

.ebrc-post-form-steps li p {
  font-size: 20px;
  line-height: 1;
}

@media (min-width: 948px) {
  .ebrc-post-form-steps li p {
    font-size: 24px;
  }
}

.ebrc-post-form-steps .next-header li::before {
  content: counter(post-form-steps);
  text-align: center;
  flex-shrink: 0;
  margin-right: 3rem;
  width: 1.412rem;
  line-height: 1.412rem;
  position: relative;
  top: -2px;
  font-size: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  height: 40px;
  width: 40px;
  padding-top: 7px;
  color: #FFCC01;
}

@media (min-width: 768px) {
  .ebrc-post-form-steps li::before {
    margin-right: 20px;
    width: 52px;
    font-size: 24px;
    line-height: 52px;
  }
}

/* NEW FORM CSS */
.ebrc-thank-you {
  margin-bottom: 60px;
}

.ebrc-thank-you h2 {
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}

.ebrc-thank-you p,
.ebrc-post-form-lockup p {
  font-size: 24px;
  line-height: 32px;
  width: 100%;
}

.ebrc-thank-you.under-17 p {
  font-size: 24px;
  line-height: 32px;
  margin-top: 30px;
}

.ebrc-post-form-lockup img {
  width: 100%;
  margin-bottom: 30px;
}

@media (min-width: 948px) {
  .ebrc-thank-you {
    margin-bottom: 90px;
  }

  .ebrc-thank-you h2 {
    font-size: 48px;
    line-height: 1;
  }

  .ebrc-post-form-steps,
  .ebrc-post-form-lockup {
    margin-bottom: 70px;
  }

  .ebrc-post-form-lockup__image {
    margin-right: 30px;
  }

  .ebrc-post-form-lockup img {
    margin-bottom: 0;
  }
}

@keyframes rotate {
  from {
    transform: scaleX(-1) rotate(0deg);
  }
  to {
    transform: scaleX(-1) rotate(-360deg);
  }
}

.pre-form-submission .post-submission-content,
.pre-form-submission .during-submission-content,
.during-form-submission .post-submission-content,
.post-form-submission .pre-submission-content,
.post-form-submission .during-submission-content,
.over-17-certified .over-35,
.under-17-certified .over-35,
.over-35-certified .under-17,
.over-35-certified .over-17,
.under-17-certified .over-17,
.over-17-certified .under-17 {
  display: none;
}

/* New Thank you page */

.questions {
  /* display: none; */
}
.true-or-false.true-false-inactive {
  display: none;
}
.questions.active {
  display: block;
}

.resources {
  display: none;
}

.resources.active {
  display: block;
}

.next-header {
  margin-bottom: 60px;
}

@media (min-width: 948px) {
  .next-header {
    margin-bottom: 90px;
  }
}

.next-header li {
  margin-bottom: 24px;
}

.next-header ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-header ul li a {
  color: #FFCC01;
  text-decoration: underline;
}

.next-header ul li a:hover {
  text-decoration: none;
}

.resources-container h4,
.ebrc-post-form-steps h4 {
  font-size: 25px;
  line-height: 1;
  color: #fff;
  margin-bottom: 30px;
}

.next-header h4 {
  font-size: 25px;
  line-height: 1;
  color: #fff;
  margin-bottom: 30px;
}

@media (min-width: 948px) {
  .next-header h4 {
    font-size: 30px;
  }
}

.resources-container h5,
.ebrc-post-form-steps h5 {
  font-size: 16px;
  color: white;

  line-height: 22px;
  text-transform: inherit;
  margin-bottom: 30px;
}

.resources-container h2 {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 30px;
  font-weight: 400;
}

@media (min-width: 948px) {
  .resources-container h2 {
    font-size: 48px;
  } 
}

.resources-container h3 {
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 30px;
}
@media (min-width: 948px) {
  .resources-container h3 {
    font-size: 24px;
  }
}

.questions-container {
  margin-bottom: 60px;
}
@media (min-width: 948px) {
  .questions-container {
    margin-bottom: 90px;
  } 
}

.questions-container h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

@media (min-width: 948px) {
  .questions-container h4 {
    font-size: 24px;
  }
}

dl.questions {
  border-bottom: 1px solid rgba(141, 141, 141, 0.5);
  display: none;
}

dl.questions dt {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  position: relative;
  cursor: pointer;
  margin: 35px 0;
  padding-right: 50px;
}
@media (min-width: 948px) {
  dl.questions dt {
    font-size: 24px;
    margin: 45px 0;
  }
}

dl.questions dt[data-status="active"]:after {
  transform: rotate(180deg);
}

dl.questions dt[data-status="active"]+dd {
  display: block !important;
}

dl.questions dt:after {
  content: '';
  background: url(/content/dam/goarmy/thank-you/caret-down-gold.svg) center top no-repeat transparent;
  width: 35px;
  height: 35px;
  position: absolute;
  right: 0;
  top: -7px;
  border-radius: 100%;
  border: 0.891667px solid rgba(255, 204, 1, 0.5);
  background-position: 11px 13px;
}

dl.questions dd {
  color: #fff;
  font-size: 16px;

  margin: 45px 0;
  display: none;
}

dl.questions dd p {
  line-height: 22.4px;
  padding-bottom: 15px;
}

dl.questions dd p a {
  text-decoration: underline;
}

dl.questions dd p a:hover {
  text-decoration: none;
}

.resources {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resources-container h4 {
  margin-bottom: 20px;
}

.resources li a {
  text-decoration: underline;
  font-size: 16px;
  margin-bottom: 30px;
  display: block;
  color: #FFCC01;
}
.resources li a:hover {
  text-decoration: none;
}

/* Light ebrc form */

.ebrc-form-section.light {
  background: #FFCC01;
}

.ebrc-form-section.light a {
  color: #221F20;
}

.ebrc-form-section.light a:hover {
  text-decoration: none;
}

.ebrc-form-section.light .pre-submission-content {
  color: #221F20;
}

.ebrc-form-section.light .covid-intro-text h2 {
}

.ebrc-form-section.light .form-field--text input {
  background: white;
  color: #221F20;
  border-color: #221F20;
}
.ebrc-form-section.light .form-field--text input:-webkit-autofill  {
  -webkit-text-fill-color: #221F20;
  -webkit-box-shadow: none;
}
.ebrc-form-section.light .form-field--text label {
  color: #221F20;
}

.ebrc-form-section.light .form-field--radio svg g {
  stroke: #221F20;
}

.ebrc-form-section.light .form-privacy-notice p {
  color: #221F20;
  font-weight: 400;
}

.ebrc-form-section.light .form-submit button {
  background: #221F20;
  color: #fff;
}

.ebrc-form-section.light .form-submit button::before {
  border: 1px solid #000;
}

.ebrc-form-section.light .next-header li::before {
  color: #221F20;
}

.ebrc-form-section.light dl.questions dd,
.ebrc-form-section.light dl.questions dt,
.ebrc-form-section.light .questions-container h4,
.ebrc-form-section.light .ebrc-post-form-steps h4,
.ebrc-form-section.light .resources-container h2,
.ebrc-form-section.light .resources-container h3,
.ebrc-form-section.light .next-header h4,
.ebrc-form-section.light .ebrc-post-form-steps p,
.ebrc-form-section.light .ebrc-thank-you {
  color: #221F20;
}

.ebrc-form-section.light dl.questions dt:after {
  content: '';
  background: url(/content/dam/goarmy/thank-you/caret-down.svg) center top no-repeat transparent;
}

.ebrc-form-section.light .ebrc-post-form-steps .next-header li::before {
  border: 1px solid rgba(0, 0, 0, 0.5);
}


.true-or-false h6 {
  text-transform: none;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  padding: 13px 0 15px;
  margin-bottom: 20px;
}
.true-or-false .question p {
  font-size: 24px;
  line-height: 32px;
}

.ebrc-form-section.light .itemlc #citizen,
.ebrc-form-section.light .itemlc .questions .question .radio-btns {
  border-color: #221F20;
}