/**
 * CONTENTS
 *
 * General section
 *
 * Breadcrumb
 *
 * Landing Page
 *
 * Amount Box
 *
 * Chart lines
 *
 * Cope page
 *
 * Survey form styling
 *
 * New bar chart
 *
 */
a:focus,
.error-summary .error-summary-list a:focus,
details summary:focus {
  background-color: #fd0;
  -webkit-box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  color: #0b0c0c;
  outline: 3px solid transparent;
  text-decoration: none;
}

.error-summary-list li {
  margin-bottom: 5px;
}

details summary:focus .summary {
  text-decoration: none;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline-color: #fd0;
}

.button {
  border: 2px solid transparent;
}

.button:focus:not(:active):not(:hover) {
  background-color: #fd0;
  border-color: #fd0;
  -webkit-box-shadow: 0 2px 0 #0b0c0c;
  box-shadow: 0 2px 0 #0b0c0c;
  color: #0b0c0c;
}

.button:focus {
  border-color: #fd0;
  -webkit-box-shadow: inset 0 0 0 1px #fd0;
  box-shadow: inset 0 0 0 1px #fd0;
  outline: 3px solid transparent;
}

.autocomplete__input:focus,
.form-control:focus {
  -webkit-box-shadow: inset 0 0 0 2px;
  box-shadow: inset 0 0 0 2px;
  outline: 3px solid #fd0;
  outline-offset: 0;
}

.multiple-choice [type=checkbox]:focus + label::before {
  border-width: 3px;
}

.report-error .report-error__toggle:focus,
#footer a:focus,
#global-header .header-proposition #proposition-links li a:focus,
#global-header .header-proposition a.menu:focus,
#global-header #logo:focus {
  color: #0b0c0c;
}

#global-header #logo:focus img {
  filter: invert(1);
}

.account-menu__link:focus,
.is-smaller .account-menu__link--home:focus,
.is-smaller .account-menu__link--menu:focus,
.is-smaller .account-menu__link--home.account-menu__link--active:focus,
.is-smaller .account-menu__link--menu.account-menu__link--active:focus {
  background-color: #fd0;
  color: #0b0c0c;
}

@media (min-width: 641px) {
  #footer .footer-meta .copyright a {
    background-position: 50% 0;
    float: right;
  }
}
#footer .footer-meta .copyright a:focus {
  background-color: #fd0;
}

textarea:focus {
  -webkit-box-shadow: inset 0 0 0 2px;
  box-shadow: inset 0 0 0 2px;
  outline: 3px solid #fd0;
  outline-offset: 0;
}

.form-control-error.form-control-error:focus {
  border-color: #0b0c0c;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.multiple-choice input {
  height: 44px;
  left: -2px;
  top: -2px;
  width: 44px;
}

.multiple-choice [type=radio] + label::before {
  box-sizing: border-box;
  height: 40px;
  width: 40px;
}

.multiple-choice [type=radio]:focus + label::before {
  border-width: 4px;
}

.multiple-choice [type=radio] + label::after {
  left: 10px;
  top: 10px;
}

#skiplink-container {
  background: none;
  text-align: left;
}

#skiplink-container div {
  margin: 0;
  max-width: none;
  text-align: left;
}

#skiplink-container .skiplink {
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  display: block;
  font-family: "GDS Transport", Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 1px !important;
  line-height: 1.14286;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 10px 15px;
  position: absolute !important;
  text-decoration: underline;
  white-space: nowrap !important;
  width: 1px !important;
}

@supports (padding: max(calc(0px))) {
  #skiplink-container .skiplink {
    padding-left: max(15px, calc(15px + env(safe-area-inset-left)));
    padding-right: max(15px, calc(15px + env(safe-area-inset-right)));
  }
}
#skiplink-container .skiplink:active,
#skiplink-container .skiplink:focus {
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: auto !important;
  margin: inherit !important;
  overflow: visible !important;
  position: static !important;
  white-space: inherit !important;
  width: auto !important;
}

.button--secondary,
.button--secondary:visited,
.button--secondary.disabled:hover,
.button--secondary[disabled=disabled]:hover,
.button--secondary[disabled]:hover,
.block-label,
.block-label--stacked,
.footer,
.box--shaded,
.side-nav__link:hover,
.dataTable tbody .status--unconfirmed,
.tag,
.tabs-nav .tabs-nav__tab:focus,
.tabs-nav .tabs-nav__tab:hover,
.tabs-nav .tabs-nav__tab:active,
.tabs-nav a.tabs-nav__tab:focus,
.tabs-nav .tabs-nav__tab.link-style:focus,
.tabs-nav .tabs-nav__tab.button--link-style:focus,
.tabs-nav a.tabs-nav__tab:hover,
.tabs-nav .tabs-nav__tab.link-style:hover,
.tabs-nav .tabs-nav__tab.button--link-style:hover,
.tabs-nav a.tabs-nav__tab:active,
.tabs-nav .tabs-nav__tab.link-style:active,
.tabs-nav .tabs-nav__tab.button--link-style:active,
.annual-summaries--group .statement__summary--parent[aria-expanded=true],
.payments .table-label.selected,
.payments .table-label:hover,
html {
  background-color: #f3f2f1;
}

.button--secondary:active {
  -webkit-box-shadow: 0 0 0 #f3f2f1;
  box-shadow: 0 0 0 #f3f2f1;
}

.block-label,
.block-label--stacked {
  border-color: #f3f2f1;
}

.dynamically-displayed {
  border-left: 5px solid #f3f2f1;
}

.explore a,
.explore--inside-government a,
.explore--inline a,
.explore .link-style,
.explore--inside-government .link-style,
.explore--inline .link-style,
.explore .button--link-style,
.explore--inside-government .button--link-style,
.explore--inline .button--link-style,
.explore--inline__links {
  color: #f3f2f1;
}

.indent {
  border-left-color: #f3f2f1;
}

.services-dashboard .service-option--links:first-child .service-option--item,
.account-menu__link:hover,
.is-smaller .account-menu__link--back {
  border-bottom-color: #f3f2f1;
}

.heading--underlined,
.section--branded h2,
.table--light-header thead,
.table__header--highlight,
.business-tax .section--branded h2,
.is-smaller .account-menu__link--home.account-menu__link--active:hover,
.account-menu__link--active,
.account-menu__link--active:visited {
  border-bottom-color: #1d70b8;
}

.heading-large--blue,
.button.button--link,
a.back-to-top-link:visited,
.back-to-top-link.link-style:visited,
.back-to-top-link.button--link-style:visited,
.page-nav__link,
.banner-links,
.side-nav--child .side-nav__list--selected .side-nav__link,
.dataTables_paginate a,
.dataTables_paginate .link-style,
.dataTables_paginate .button--link-style,
.accordion__button:visited,
.toggle__button,
.tabs-nav .tabs-nav__tab:visited,
.tabs-nav__tab,
.payments .tab,
.services-dashboard .service-option--links .service-option--link:link,
.link,
.link:active,
details summary,
a,
.link-style,
.button--link-style,
.button--link-style,
.subnav a:visited,
.subnav .link-style:visited,
.subnav .button--link-style:visited,
.is-smaller .subnav__section a:hover,
.is-smaller .subnav__section .link-style:hover,
.is-smaller .subnav__section .button--link-style:hover {
  color: #1d70b8;
}

.brand-border--top,
.section--blue-top,
.footer,
.service-info {
  border-top-color: #1d70b8;
}

.button--notification,
.button--notification:visited,
.button--notification.disabled:hover,
.button--notification[disabled=disabled]:hover,
.button--notification[disabled]:hover,
.alpha-banner .phase-tag,
.beta-banner .phase-tag,
.phase-tag,
.side-nav__list--selected .side-nav__link,
.side-nav__list--selected:hover .side-nav__link,
.highlight-message--dark,
.hero,
.paye-statements .sidebar-links__item.selected,
option:active,
option:checked,
.phase-banner .phase-tag,
.phase-banner-alpha .phase-tag,
.phase-banner-beta .phase-tag,
.phase-tag,
.full-width-banner,
.hmrc-banner .phase-tag {
  background-color: #1d70b8;
}

select:focus::-ms-value {
  background-color: #1d70b8;
}

.button--notification:active {
  -webkit-box-shadow: 0 0 0 #1d70b8;
  box-shadow: 0 0 0 #1d70b8;
}

.attorneyBanner,
.panel-indent--info,
.delegation-banner {
  border-left-color: #1d70b8;
}

.page-nav__link:focus,
.js-enabled .add-focus,
.modal-dialog__content:focus,
.button:focus,
details summary:focus,
.error-summary:focus {
  outline-color: #ffdd00;
}

.multiple-choice [type=radio]:focus + label::before {
  -webkit-box-shadow: 0 0 0 4px #ffdd00;
  box-shadow: 0 0 0 4px #ffdd00;
}

.multiple-choice [type=checkbox]:focus + label::before {
  -webkit-box-shadow: 0 0 0 3px #ffdd00;
  box-shadow: 0 0 0 3px #ffdd00;
}

.account-menu__link:focus,
.is-smaller .account-menu__link--home:focus,
.is-smaller .account-menu__link--menu:focus,
.is-smaller .account-menu__link--home.account-menu__link--active:focus,
.is-smaller .account-menu__link--menu.account-menu__link--active:focus {
  border-bottom-color: #ffdd00;
}

button,
.button,
button:visited,
.button:visited,
button.disabled:hover,
button[disabled=disabled]:hover,
button[disabled]:hover,
.button.disabled:hover,
.button[disabled=disabled]:hover,
.button[disabled]:hover,
.button--small,
.button--small:visited,
.button--small.disabled:hover,
.button--small[disabled=disabled]:hover,
.button--small[disabled]:hover,
.toggle__button--active,
.toggle__button--active:hover,
.toggle__button--active:focus,
.button[disabled=disabled] {
  background-color: #00703c;
}

button:active,
.button:active,
.button--small:active {
  -webkit-box-shadow: 0 0 0 #00703c;
  box-shadow: 0 0 0 #00703c;
}

.list--ticks li::before,
.tick,
.form-hint-list-item--valid {
  color: #00703c;
}

.button--alert,
.button--alert:visited,
.button--alert.disabled:hover,
.button--alert[disabled=disabled]:hover,
.button--alert[disabled]:hover,
.marker-column__marker,
.reminder.urgent a,
.reminder.urgent .link-style,
.reminder.urgent .button--link-style,
.alert-block,
.alert--important,
.tabs-nav .tabs-nav__tab .count,
.flag.flag--urgent,
.highlight-block--red,
.main-nav .count,
.badge {
  background-color: #d4351c;
}

.button--alert:active {
  -webkit-box-shadow: 0 0 0 #d4351c;
  box-shadow: 0 0 0 #d4351c;
}

.email-form-errors .error-notification,
.annual-summaries--group .alert--text,
.sent-in-error,
.business-tax .content__body .flag.flag--urgent,
.error-message,
.error-summary .error-summary-list a,
.error-summary .error-summary-list .link-style,
.error-summary .error-summary-list .button--link-style {
  color: #d4351c;
}

.email-form-errors .error-notification,
.attorneyBanner--client-request-rejected,
.business-tax .content__body .flag.flag--urgent,
.form-group-error {
  border-left-color: #d4351c;
}

.business-tax .alert--failure,
.form-control-error,
textarea.form-control-error,
input.form-control-error[type=text],
input.form-control-error[type=password],
.error-summary {
  border-color: #d4351c;
}

.form-control-error.form-control-error.form-control-error {
  border-color: #d4351c;
}

.govuk-box-highlight {
  background-color: #00703c;
}

.header__menu__proposition-links .faded-text--small {
  color: #A7A7A7;
}

.js-enabled #printLink {
  background: transparent no-repeat 0 50%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASAgMAAAAvVbb5AAAACVBMVEX///////8KDAwmYEUdAAAAAXRSTlMAQObYZgAAADBJREFUCFtjYOBa1cDAoBkKJFYCCSYwEYpCrAICZCI0FEhkrURmQRRnrYRpW7WqAQAlGR86Ip1rwwAAAABJRU5ErkJggg==");
  margin-top: 1em;
  padding: 0.5em 0 0.5em 28px;
  zoom: 1;
}

@media print {
  .printable {
    visibility: hidden;
  }
  .printable .content__body * {
    visibility: visible;
  }
  .printable .content__body {
    float: none;
    width: 100%;
  }
  .printable #skipto {
    left: 0px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .printable .content__body a, .printable .panel-indent {
    display: none;
  }
  .printable .content__body .accordion a {
    display: inline;
  }
  .printable .mainpage a {
    display: inline;
  }
  .printable .mainpage .govuk-box-highlight p {
    color: #000;
  }
  .printable .mainpage #printLink {
    display: none;
  }
  .printable .mainpage .amount {
    text-align: left;
  }
}
/**
 * Things that need the font:
 **/
.accordion,
.page-info,
.backlink,
.printlink,
.graph .amount {
  font-family: "GDS Transport", Arial, sans-serif;
}

/*------------------------------------*\
    #General Section
\*------------------------------------*/
.report-error {
  float: none;
}

h2.heading-medium {
  margin-top: 1.875em !important;
}
@media only screen and (max-width: 640px) {
  h2.heading-medium {
    font-size: 18px;
  }
}

h2.summary {
  margin-top: 1em !important;
}

.grid-wrapper {
  margin: 0;
}

.top-title-heading {
  margin-bottom: 0;
  margin-top: 0.5em;
}

@media only screen and (max-width: 640px) {
  .heading-bottom-margin {
    margin-bottom: 0.5em;
  }
}

.mainpage,
.fullwidth {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

.helpline-sidebar {
  border-top: 10px solid #005ea5;
  margin-top: 2em;
}

@media only screen and (max-width: 640px) {
  .backlink {
    display: none;
  }
}

/*------------------------------------*\
    #HEADER - Global Breadcrumb
\*------------------------------------*/
#global-breadcrumb {
  border-bottom: 0;
  padding-bottom: 0;
}
#global-breadcrumb nav ol li {
  background-image: url("/check-your-state-pension/assets/images/icons/breadcrumb-separator.png");
}
#global-breadcrumb ol {
  padding: 0.75em 0 0.55em;
}
#global-breadcrumb ol li a:focus {
  outline: 3px solid #ffbf47;
}

.service-info-p,
div.last-login > p {
  color: #6f777b;
  font-family: nta, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 5px;
  text-transform: none;
}

.logo {
  display: none;
}

/*------------------------------------*\
    #Landing Page
\*------------------------------------*/
div.panel-indent {
  border-left: 4px solid #b1b4b6;
  margin: 20px 10px 45px 0;
  padding: 10px 0 10px 15px;
}

#content #continue {
  margin: 0 15px 15px 0;
}

.verify-logo {
  float: left;
  height: 50px;
  margin-right: 10px;
}

.verify-block {
  font-size: 26px;
  line-height: 26px;
  text-transform: uppercase;
}

.sign-in-grid .grid .inner-block {
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}
@media only screen and (max-width: 640px) {
  .sign-in-grid .grid .inner-block {
    padding: 0;
  }
}

.sign-in-grid .left .inner-block {
  border-right: 3px solid #bfc1c3;
  padding-left: 0;
}
@media only screen and (max-width: 640px) {
  .sign-in-grid .left .inner-block {
    border: 0;
  }
}

/*------------------------------------*\
    #Amount Box
\*------------------------------------*/
.govuk-box-highlight {
  background: #00703c;
  color: #fff;
}

.account-menu__link:focus {
  border-bottom-color: white;
}

.highlighted-event,
.govuk-box-highlight {
  margin: 1.5em 0 1em;
  padding: 1.75em 0.75em 1.25em 0.75em;
}
@media only screen and (max-width: 640px) {
  .highlighted-event,
  .govuk-box-highlight {
    margin: 0 -15px;
    padding: 0.5em 0.5em 0.25em 0.75em;
  }
}
.highlighted-event p,
.govuk-box-highlight p {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 640px) {
  .highlighted-event p,
  .govuk-box-highlight p {
    font-size: 20px;
  }
}
.highlighted-event p em,
.govuk-box-highlight p em {
  display: block;
  font-size: 80px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0;
  padding: 0.2em 0px 0.1em;
}
@media only screen and (max-width: 800px) {
  .highlighted-event p em,
  .govuk-box-highlight p em {
    font-size: 53px;
    margin: 0;
  }
}
@media only screen and (max-width: 640px) {
  .highlighted-event p em,
  .govuk-box-highlight p em {
    font-size: 43px;
    margin: 0;
  }
}
@media only screen and (max-width: 320px) {
  .highlighted-event p em,
  .govuk-box-highlight p em {
    font-size: 33px;
    margin: 0;
  }
}

.nisp-forecast__weekly {
  font-size: 36px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.11111;
}

.nisp-forecast__longterm {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.25;
}

/*----------------------------------*\
    # Chart lines
\*----------------------------------*/
.chart-block {
  clear: both;
  margin-bottom: 80px;
  margin-top: 25px;
}
.chart-block span.graph-title {
  font-size: 19px;
  font-weight: 800;
}
@media only screen and (max-width: 640px) {
  .chart-block span.graph-title {
    font-size: 16px;
  }
}
.chart-block .footnote {
  float: left;
  margin-bottom: 25px;
  margin-top: -15px;
}

.graph {
  float: left;
  margin-top: -2px;
  width: 100%;
}
.graph div {
  background: #c1dfe4;
  display: block;
  height: 2em;
  position: relative;
}
@media only screen and (max-width: 640px) {
  .graph div {
    margin-left: 0;
  }
}
.graph div .amount {
  background: #00703c;
  color: #fff !important;
  display: block;
  font-family: "GDS Transport", Arial, sans-serif;
  font-size: 1.3em;
  height: 100%;
  line-height: 1.75;
  text-align: left;
}
@media only screen and (max-width: 972px) {
  .graph div .amount {
    min-width: 46%;
  }
}
@media only screen and (min-width: 782px) and (max-width: 948px) {
  .graph div .amount {
    min-width: 48%;
  }
}
@media only screen and (min-width: 702px) and (max-width: 781px) {
  .graph div .amount {
    min-width: 54%;
  }
}
@media only screen and (min-width: 641px) and (max-width: 701px) {
  .graph div .amount {
    min-width: 60%;
  }
}
@media only screen and (max-width: 640px) {
  .graph div .amount {
    font-size: 1em;
    line-height: 2em;
  }
}
@media only screen and (max-width: 407px) {
  .graph div .amount {
    min-width: 40%;
  }
}
@media only screen and (max-width: 398px) {
  .graph div .amount {
    min-width: 42%;
  }
}
@media only screen and (max-width: 370px) and (min-width: 321px) {
  .graph div .amount {
    min-width: 50%;
  }
}
@media only screen and (max-width: 320px) {
  .graph div .amount {
    min-width: 60%;
  }
}
.graph div .amount > * {
  padding-left: 10px;
}

/*----------------------------------*\
    # Cope Page
\*----------------------------------*/
.copeback {
  display: none;
}
@media only screen and (max-width: 640px) {
  .copeback {
    display: inline-block;
  }
}

.bold-intext {
  font-weight: bold;
}

/*------------------------------------*\
    #Survey form styling
\*------------------------------------*/
fieldset {
  margin-top: 2em;
}

.email {
  padding-left: 0.78em;
}

input[name=email] {
  width: 75%;
}

.form-field--error {
  border-left: 5px solid #b10e1e;
}

.form-field--error .form-control {
  border: 5px solid #b10e1e;
}

.section-border {
  border-bottom: 5px solid #005ea5;
  margin-bottom: 20px;
}

.align-right {
  text-align: right;
}

.lang-select {
  border-bottom: 0px;
  float: right;
  font-weight: 300;
  line-height: 1.25;
  padding: 0.65em 0px;
  text-align: right;
  text-transform: none;
  width: 100%;
}

input:focus {
  outline: 3px solid #ffdd00;
}

a:focus {
  background-color: #ffdd00;
  color: #0b0c0c !important;
  outline: 3px solid #ffdd00;
}

.button:focus {
  background-color: #fd0;
  border-bottom-color: black;
  -webkit-box-shadow: 0 2px 0 #0b0c0c;
  box-shadow: 0 2px 0 #0b0c0c;
  color: #0b0c0c;
  outline: none;
}

.error-summary {
  border: 5px solid #d4351c;
  margin-bottom: 30px;
  margin-top: 30px;
  padding: 20px 15px 15px;
}

.common-error {
  color: #d4351c;
  font-weight: bold;
}

.form-group-error {
  border-left: 4px solid #d4351c;
}

input.form-control-error[type=text] {
  border: 4px solid #d4351c;
}

.error-summary .error-summary-list a {
  color: #d4351c;
  font-weight: bold;
  text-decoration: underline;
}

.nino,
h1 + details .govuk-details__text,
.hmrc-page-heading + .govuk-details .govuk-details__text {
  font-variant-numeric: tabular-nums;
}

#nino {
  margin-bottom: 3rem;
}

.banner-panel-close {
  background-color: #005ea5;
  color: #fff;
  display: none;
}

.banner-links {
  color: #005ea5;
}

.backlink,
.printlink,
#printLink {
  display: none;
  visibility: hidden;
}
.js-enabled .backlink,
.js-enabled .printlink,
.js-enabled #printLink {
  display: block;
  visibility: visible;
}

/*----------------------------------*\
    # New bar chart
\*----------------------------------*/
#barChart .graph-green-bar {
  border-bottom: 10px solid #28a197;
}

#barChart .graph-grey-bar {
  border-top: 2px solid #b1b4b6;
}

#barChart .content, #tax-spent-header, #tax-spent-footer {
  display: flex;
  flex-flow: row nowrap;
  margin: 0.5em 0 0.2em;
}

#barChart dd {
  flex-grow: 1;
  padding: 0;
  margin: 0;
  align-self: end;
}

#barChart dt {
  flex-grow: 3;
  padding: 0;
  margin: 0;
}

#barChart dd {
  text-align: right;
}

.govuk-summary-list__row--no-actions:after {
  width: 0;
}
.govuk-summary-list__no-margin-bottom {
  margin-bottom: 0;
}

.govuk-summary-list__row:has([aria-expanded=true]) {
  border-bottom: none;
}