/*
  * Plan International UK Engaging Networks stylesheet
  *
  * Except where you're constrained by EN naming conventions, please use BEM (Block Element Modifier) naming
  * with an plan-uk__ prefix to avoid clashes with any other stylesheets in use.
  *
  * Within each section, please keep rules in alphabetical order by selector, unless there's a strong reason not to.
  *
  * Contents:
  * - Colours & other CSS variables
  * - Page
  * - Typography
  * - Page layout, Header, Footer
  * - Rows & columns
  * - Background image
  * - Page elements
  * - Forms
  * - Surveys
  * - Sharing
  * - Helper classes
  *
  * Made by We Could Even https://wecouldeven.com
  */

/**************

  Colours & other CSS variables

  **************/

:root {
  /* Brand colours */
  --plan-uk-colour-blue: #0072ce;
  --plan-uk-colour-blue-slightly-transparent: #0072ceee;
  --plan-uk-colour-dark-blue: #243c4b;
  --plan-uk-colour-dark-blue-slightly-transparent: #243c4bee;
  --plan-uk-colour-light-blue: #58cae7;
  --plan-uk-colour-lighter-blue: #eef7fc;
  --plan-uk-colour-lightest-blue: #f6f7f8;
  --plan-uk-colour-lightest-blue-slightly-transparent: #f6f7f8ee;
  --plan-uk-colour-new-grey: #6d777e;
  --plan-uk-colour-light-grey: #d9d9d6;
  --plan-uk-colour-lightest-grey: #f5f5f1;
  --plan-uk-colour-mid-grey: #343434;
  --plan-uk-colour-magenta: #e00083;
  --plan-uk-colour-red: #d22630;
  --plan-uk-colour-yellow: #f1c400;

  /* Other colours */
  --plan-uk-colour-facebook: #1877f2;
  --plan-uk-colour-linkedin: #0a66c2;
  --plan-uk-colour-whatsapp: #25d366;

  /* Content widths */
  --plan-uk-content-max-width: 88rem;
  --plan-uk-single-column-max-width: 50rem;
  --plan-uk-spacer: 1.5rem;
}

/**************

  Page

  **************/

body {
  background-color: var(--plan-uk-colour-blue);
  color: var(--plan-uk-colour-dark-blue);
  font-family: "Helvetica LT Std Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

@media only screen and (min-width: 40em) {
  body {
    font-size: 1.188rem;
    line-height: 1.368;
  }
}

.plan-uk__normal-text {
  font-family: "Helvetica LT Std Regular", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

@media only screen and (min-width: 40em) {
  .plan-uk__normal-text {
    font-size: 1.188rem !important;
    line-height: 1.368 !important;
  }
}

/**************

  Typography

  (Typography helper classes are included here too for ease of comparison, these use !important)

  **************/

a,
a:link,
a:visited {
  color: var(--plan-uk-colour-dark-blue);
  text-decoration-color: var(--plan-uk-colour-dark-blue);
  text-decoration-line: underline;
  text-decoration-style: solid;
}

a:hover,
a:active,
a:focus {
  color: var(--plan-uk-colour-blue);
  text-decoration-color: var(--plan-uk-colour-blue);
}

a.plan-uk__link--blue,
a.plan-uk__link--blue:link,
a.plan-uk__link--blue:visited {
  color: var(--plan-uk-colour-blue) !important;
  text-decoration-color: var(--plan-uk-colour-blue) !important;
}

a.plan-uk__link--blue:hover,
a.plan-uk__link--blue:active,
a.plan-uk__link--blue:focus {
  color: var(--plan-uk-colour-dark-blue) !important;
  text-decoration-color: var(--plan-uk-colour-dark-blue) !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Core Paint", "helvetica neue", Helvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.h1,
.h2,
.h3,
.h4 {
  font-family: "Core Paint", "helvetica neue", Helvetica, sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

h1 {
  color: var(--plan-uk-colour-blue);
  font-size: 4rem;
  line-height: 1;
  margin: 1rem 0 calc(var(--plan-uk-spacer) * 2);
  text-align: center;
}

.h1,
.h1a {
  color: var(--plan-uk-colour-blue) !important;
  font-size: 4rem !important;
  line-height: 1 !important;
  margin: 1rem 0 calc(var(--plan-uk-spacer) * 2) !important;
  text-align: center !important;
}

.h1b {
  color: var(--plan-uk-colour-blue) !important;
  font-size: 2.75rem !important;
  line-height: 1.1365 !important;
  margin: 1rem 0 calc(var(--plan-uk-spacer) * 2) !important;
  text-align: center !important;
}

@media only screen and (min-width: 40em) {
  .h1b {
    font-size: 3.25rem !important;
    line-height: 1.1155 !important;
  }
}

h2 {
  font-family: "Helvetica LT Std Bold", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: calc(var(--plan-uk-spacer) / 2) 0;
  text-transform: none;
}

.h2 {
  font-family: "Helvetica LT Std Bold", Helvetica, Arial, sans-serif !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  margin: calc(var(--plan-uk-spacer) / 2) 0 !important;
  text-transform: none !important;
}

h3 {
  font-size: 1.75rem;
  line-height: 1.286;
  margin: 0.5rem 0;
}

.h3 {
  font-size: 1.75rem !important;
  line-height: 1.286 !important;
  margin: 0.5rem 0 !important;
}

@media only screen and (min-width: 40em) {
  h3 {
    font-size: 2.5rem;
    line-height: 1.25;
  }

  .h3 {
    font-size: 2.5rem !important;
    line-height: 1.25 !important;
  }
}

h5 {
  font-size: inherit;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.h5 {
  font-size: inherit !important;
  font-weight: bold !important;
  margin-bottom: 0.25rem !important;
}

/**************

  Page layout, Header, Footer

  **************/

.plan-uk__footer {
  background-color: var(--plan-uk-colour-lightest-blue);
  position: relative;
  z-index: 1;
}

.plan-uk__footer__about {
  align-items: center;
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__about {
    align-items: flex-start;
  }
}

.plan-uk__footer__about a,
.plan-uk__footer__about a:link,
.plan-uk__footer__about a:visited {
  color: var(--plan-uk-colour-dark-blue);
  text-decoration: underline;
}

.plan-uk__footer__about a:hover,
.plan-uk__footer__about a:active,
.plan-uk__footer__about a:focus {
  color: var(--plan-uk-colour-blue);
}

.plan-uk__footer__about__links-list {
  column-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.plan-uk__footer__about__links-list > * {
  position: relative;
}

.plan-uk__footer__about__links-list > *:not(:last-child)::after {
  content: "|";
  margin-left: 1rem;
}

.plan-uk__footer__about__logo {
  height: 2.75rem;
  margin-bottom: calc(var(--plan-uk-spacer) * 2);
  max-width: none;
  width: auto;
}

.plan-uk__footer__bottom {
  border-top: 1px solid var(--plan-uk-colour-light-grey);
  display: flex;
  flex-direction: column;
  padding: calc(var(--plan-uk-spacer) * 2) 0;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.plan-uk__footer__donate--1 {
  display: flex;
  justify-content: center;
  margin-bottom: calc(var(--plan-uk-spacer) * 2);
}

.plan-uk__footer__sidebar > .plan-uk__footer__donate-button--2 {
  display: none !important;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__donate--1 {
    display: none;
  }

  .plan-uk__footer__sidebar > .plan-uk__footer__donate-button--2 {
    display: block !important;
    margin-bottom: calc(var(--plan-uk-spacer) * 2);
    min-width: 20rem;
  }
}

.plan-uk__footer__fundraising-regulator-logo {
  max-width: 8rem;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__fundraising-regulator-logo {
    max-width: 12rem;
  }
}

.plan-uk__footer__inner,
.plan-uk__header__inner,
.plan-uk__wrapper__inner {
  margin: 0 auto;
  width: 100%;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__inner,
  .plan-uk__header__inner,
  .plan-uk__wrapper__inner {
    max-width: var(--plan-uk-content-max-width);
  }
}

.plan-uk__footer__inner {
  padding: 1rem;
  padding-top: 2rem;
}

@media only screen and (min-width: 76em) {
  .plan-uk__footer__inner {
    padding: 2rem calc(var(--plan-uk-spacer) * 2) 1rem;
  }
}

.plan-uk__footer__about__links-list,
.plan-uk__footer__links-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-uk__footer__links-list li {
  margin: 0.5rem 0;
}

.plan-uk__footer__section {
  margin-bottom: 2rem;
}

.plan-uk__footer__section a,
.plan-uk__footer__section a:link,
.plan-uk__footer__section a:visited {
  color: var(--plan-uk-colour-dark-blue);
  text-decoration: none;
}

.plan-uk__footer__section a:hover,
.plan-uk__footer__section a:active,
.plan-uk__footer__section a:focus {
  color: var(--plan-uk-colour-blue);
}

.plan-uk__footer__section--address,
.plan-uk__footer__section--phone {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.plan-uk__footer__section--phone {
  font-size: 1.125rem;
  font-weight: bold;
}

.plan-uk__footer__section--social-icons {
  display: flex;
  gap: 1.75rem;
  margin-bottom: calc(var(--plan-uk-spacer) * 2);
}

.plan-uk__footer__sidebar {
  margin-top: calc(var(--plan-uk-spacer) * 2);
  text-align: center;
}

@media only screen and (min-width: 64em) {
  .plan-uk__footer__sidebar {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
    text-align: right;
  }
}

.plan-uk__footer__sub-title {
  color: var(--plan-uk-colour-dark-blue);
  font-size: 1.125rem;
  letter-spacing: 1.1px;
  margin-bottom: var(--plan-uk-spacer);
}

.plan-uk__footer__top__go-to-top {
  display: block;
  margin-bottom: var(--plan-uk-spacer);
  text-align: center;
}

.plan-uk__footer__top__go-to-top__arrow {
  fill: var(--plan-uk-colour-blue);
  width: calc(var(--plan-uk-spacer) * 2);
}

.plan-uk__header {
  background-color: white;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 76em) {
  .plan-uk__header {
    padding: 0 calc(var(--plan-uk-spacer) * 2);
  }
}

.plan-uk__header__inner {
  padding: 1rem;
}

@media only screen and (min-width: 40em) {
  .plan-uk__header__inner {
    padding: 0.85rem 1rem;
  }
}

@media only screen and (min-width: 76em) {
  .plan-uk__header__inner {
    padding: calc(var(--plan-uk-spacer) * 1) calc(var(--plan-uk-spacer) * 2);
  }
}

.plan-uk__header a,
.plan-uk__header a:link,
.plan-uk__header a:visited {
  text-decoration: none;
}

.plan-uk__header__logo {
  height: 2.15rem;
  max-width: none;
  width: auto;
}

@media only screen and (min-width: 40em) {
  .plan-uk__footer__about__logo {
    height: 3.2rem;
  }

  .plan-uk__header__logo {
    height: 2.75rem;
  }
}

@media only screen and (min-width: 76em) {
  .plan-uk__footer__about__logo,
  .plan-uk__header__logo {
    height: 3.6rem;
  }
}

.plan-uk__main-content {
  margin: 0 auto;
}

@media only screen and (min-width: 64em) {
  .plan-uk__main-content {
    max-width: var(--plan-uk-content-max-width);
  }
}

.plan-uk__wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media only screen and (min-width: 76em) {
  .plan-uk__wrapper {
    padding: 0 calc(var(--plan-uk-spacer) * 2);
  }
}

.plan-uk__wrapper__inner {
  background-color: white;
  margin: 0;
  padding: 0;
}

.plan-uk__wrapper__inner:has(
    .en__component--row--1
      .en__component--column
      .en__component--contactblock:last-child
  ),
.plan-uk__wrapper__inner:has(
    .en__component--row--1
      .en__component--column
      .en__component--formblock:last-child
  ),
.plan-uk__wrapper__inner:has(
    .en__component--row--1
      .en__component--column
      .en__component--tweetcontactblock:last-child
  ),
.plan-uk__wrapper__inner:has(
    .en__component--row--1
      .en__component--column
      .plan-uk__background--dark-blue:last-child
  ) {
  padding-bottom: 0;
}

@media only screen and (min-width: 64em) {
  .plan-uk__wrapper__inner {
    padding: 1rem;
    padding-bottom: calc(var(--plan-uk-spacer) * 2);
  }

  .plan-uk__wrapper__inner:has(.en__component--row--1),
  .plan-uk__wrapper__inner:has(.en__component--advcolumn:only-child) {
    margin: calc(var(--plan-uk-spacer) * 2) 0;
    width: auto;
  }
}

@media only screen and (min-width: 76em) {
  .plan-uk__wrapper__inner {
    margin: calc(var(--plan-uk-spacer) * 2) 0;
    padding: calc(var(--plan-uk-spacer) * 2);
  }
}

/**************

  Rows & columns

  **************/

.en__component--advrow {
  flex-direction: column;
}

@media screen and (min-width: 64em) {
  .en__component--advrow {
    flex-direction: row;
  }
}

.en__component--column {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.en__component--column > * {
  max-width: 100%;
  width: 100%;
}

.en__component--column > .en__component--copyblock,
.en__component--column > .en__component--contactblock,
.en__component--column > .en__component--formblock,
.en__component--column > .en__component--socialshareblock,
.en__component--column > .en__component--tweetcontactblock,
.en__component--column > .en__component--widgetblock {
  padding-left: var(--plan-uk-spacer);
  padding-right: var(--plan-uk-spacer);
}

.en__component--row {
  align-items: flex-start;
  background-color: transparent;
  gap: 1rem;
  justify-content: space-between;
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 64em) {
  .en__component--row {
    gap: 4rem;
  }
}

/* Override EN built-in breakpoint */
@media only screen and (max-width: 600px),
  only screen and (max-device-width: 600px) {
  .en__component--row,
  .en__component--row.en__component--advrow {
    display: flex !important;
  }
}

/* Single column */

.en__component--row--1 .en__component--column,
.en__component--advrow .en__component--advcolumn:first-child:last-child {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media only screen and (min-width: 64em) {
  .en__component--row--1 .en__component--column,
  .en__component--advrow .en__component--advcolumn:first-child:last-child {
    max-width: var(--plan-uk-single-column-max-width);
    width: var(--plan-uk-single-column-max-width);
  }
}

@media screen and (min-width: 64em) {
  /* Set widths for columns in 2 column rows
      Don't set max widths for advanced columns, as assume widths will be set in the page editor */

  /* 1st column in a 2 column row */
  .en__component--row--2 .en__component--column--1 {
    width: calc(57% - 2rem) !important;
  }

  /* 2nd column in a 2 column row */
  .en__component--row--2 .en__component--column--2 {
    width: calc(43% - 2rem) !important;
  }
}

/* Set colours for second column in a 2 column row */

.en__component--row--2 .en__component--column--2,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2) {
  background-color: var(--plan-uk-colour-dark-blue);
}

.en__component--row--2 .en__component--column--2 > *,
.en__component--row--2 .en__component--column--2 label,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  > *,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  label,
.en__component--contactblock label {
  color: white;
}

.en__component--row--2
  .en__component--column--2
  > .en__component--copyblock.plan-uk__explanation-text {
  color: var(--plan-uk-colour-dark-blue);
}

.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a,
.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:link,
.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:visited,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:link,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:visited {
  color: white;
  text-decoration-color: white;
  text-decoration-line: underline;
  text-decoration-style: solid;
}

.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:hover,
.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:active,
.en__component--row--2
  .en__component--column--2
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:focus,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:hover,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:active,
.en__component--advrow:has(:nth-child(2):last-child)
  .en__component--advcolumn:nth-child(2)
  .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__skip-to-form
  )
  a:focus {
  text-decoration-color: var(--plan-uk-colour-blue);
}

/* Style the first text/form/widget block in a column
  * If there is a code block at the beginning of a column ignore it
  * This won't work if there are multiple code blocks at the beginning of a column,
  * so we also use some JS to check for the first text/form/widget block and add a helper class */
.en__component--row
  .en__component--column
  > :is(
    .en__component--copyblock,
    .en__component--formblock,
    .en__component--widgetblock
  ):first-child,
.en__component--row
  .en__component--column
  > .en__component--codeblock:first-child
  + :is(
    .en__component--copyblock,
    .en__component--formblock,
    .en__component--widgetblock
  ),
.en__component--column
  > .plan-uk__column__first-block:not(.en__component--imageblock) {
  padding-top: var(--plan-uk-spacer);
}

.plan-uk__column__first-block:not(.plan-uk__intro-text) h1,
.plan-uk__column__first-block:not(.plan-uk__intro-text) .h1,
.plan-uk__column__first-block:not(.plan-uk__intro-text) .h1a,
.plan-uk__column__first-block:not(.plan-uk__intro-text) .h1b {
  margin-top: 0 !important;
}

/* Style the last text/form/widget block in a column
 * If a code block is the last block in a column this won't work,
 * so we also use some JS to check for the last text/form/widget block and add a helper class */
.en__component--row
  .en__component--column
  > :is(
    .en__component--copyblock,
    .en__component--formblock,
    .en__component--widgetblock
  ):last-child,
.en__component--column
  > .plan-uk__column__last-block:not(.en__component--imageblock) {
  padding-bottom: var(--plan-uk-spacer);
}

/**************

  Background image

  **************/

/* When full-screen background image is visible, hide the first column in a 2 column row... */
body:has(.plan-uk__background-image--visible) .en__component--row--2,
body:has(.plan-uk__background-image--visible)
  .en__component--advrow:has(:nth-last-child(2):first-child) {
  row-gap: 0;
}

body:has(.plan-uk__background-image--visible)
  .en__component--row--2
  .en__component--column--1,
body:has(.plan-uk__background-image--visible)
  .en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child {
  display: none;
}

/* ...but show the column in the EN editor */
#en__pagebuilder .en__component--column,
#en__pagebuilder .en__component--advcolumn {
  display: block !important;
}

/* The full-screen background image element
  * This is hidden by default, and the image is set by JS and it's only made visible on desktop screens */
.plan-uk__background-image {
  display: none;
  height: 100vh;
  height: 100lvh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.plan-uk__background-image__image {
  background-image: url(images/transparent.png);
  background-position: center top;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Never show the image block used to set the background image -- we just use this to get the image src and alt/credit */
.en__component--imageblock:has(.plan-uk__background-image-block--desktop),
form[action*="survey"]
  .en__component--imageblock:has(.plan-uk__background-image-block--mobile) {
  display: none;
}

#en__pagebuilder
  .en__component--imageblock:has(.plan-uk__background-image-block--desktop),
#en__pagebuilder
  form[action*="survey"]
  .en__component--imageblock:has(.plan-uk__background-image-block--mobile) {
  display: block;
}

@media screen and (min-width: 64em) {
  /* When using full-screen background image on desktop, make sure content fills the height of the screen */
  body:has(.plan-uk__background-image--visible) {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* When full-screen background image is visible, hide the first column in a 2 column row
      (on desktop use visibility not display, because we want the column to be present for spacing purposes) */
  body:has(.plan-uk__background-image--visible)
    .en__component--row--2
    .en__component--column--1,
  body:has(.plan-uk__background-image--visible)
    .en__component--advrow:has(:nth-last-child(2):first-child)
    .en__component--advcolumn:first-child {
    display: block;
    visibility: hidden;
  }

  .en__component--imageblock:has(.plan-uk__background-image-block--mobile) {
    display: none;
  }

  .plan-uk__background-image--visible {
    display: block;
  }

  body:has(.plan-uk__background-image--visible) .plan-uk__wrapper__inner {
    background-color: transparent;
  }
}

/* On survey actions when there's a background image, show it on mobile too */

body:has(.plan-uk__background-image--visible)
  .plan-uk__wrapper__inner:has(form[action*="survey"]) {
  background-color: transparent;
}

.plan-uk__background-image--visible:has(
    ~ .plan-uk__wrapper form[action*="survey"]
  ) {
  display: block;
}

.plan-uk__background-image-credit {
  bottom: calc(var(--plan-uk-spacer) * 3);
  display: none;
  left: var(--plan-uk-spacer);
  position: fixed;
  width: calc(100% - 4rem);
  z-index: 1;
}

.plan-uk__background-image-credit > .plan-uk__image-credit {
  bottom: 0;
  left: 0;
}

.plan-uk__background-image-credit--visible {
  display: block;
}

/**************

  Page elements

  Accordions
  Find out more expandable blocks
  Image blocks
  Image credits
  Latest action takers
  Progress bars
  Progress indicators
  Quotes
  Text blocks
  Totaliser widgets

  **************/

blockquote {
  border-left: none;
  margin: var(--plan-uk-spacer) 0;
  padding: 0;
}

blockquote,
blockquote p {
  color: inherit;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

blockquote::before {
  color: var(--plan-uk-colour-blue);
  content: "“";
  display: block;
  font-family: "Core Paint", "helvetica neue", Helvetica, sans-serif;
  font-size: 4.688rem;
  font-weight: normal;
  line-height: 0.8535;
  margin-bottom: calc(-1.25 * var(--plan-uk-spacer));
  text-align: center;
}

blockquote footer cite {
  color: var(--plan-uk-colour-blue);
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
}

blockquote footer cite::before {
  content: none;
}

@media only screen and (min-width: 40em) {
  blockquote {
    padding: 0 var(--plan-uk-spacer);
  }

  blockquote,
  blockquote p {
    font-size: 1.5rem;
    line-height: 1.085;
  }

  blockquote footer cite {
    font-size: 1.188rem;
    line-height: 1.368;
  }
}

details {
  margin: 0;
}

summary {
  cursor: pointer;
  display: flex;
  font-family: "Core Paint", helvetica neue, Helvetica, sans-serif;
  font-size: 1.19rem;
  line-height: 1.262;
  list-style-image: none;
  margin: 1rem 0;
  text-transform: uppercase;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  background-image: url(images/chevron-blue.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 1.5rem;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
  width: 1.5rem;
}

details[open] > summary::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

summary + p {
  margin-top: 1rem;
}

.en__component--copyblock {
  margin: 0;
  padding: var(--plan-uk-spacer);
}

.en__component--copyblock ol li {
  margin-bottom: 1rem;
}

.en__component--copyblock ul {
  margin-bottom: var(--plan-uk-spacer);
  margin-top: -calc(var(--plan-uk-spacer) / 2);
}

.en__component--copyblock ul li {
  margin-bottom: 0.25rem;
}

.en__component--copyblock ul li:first-child {
  margin-top: -0.5rem;
}

.en__component--copyblock ul li::marker {
  color: var(--plan-uk-colour-blue);
  font-size: 1.75rem;
}

/* By default, don't add extra spacing between two text blocks of the same style */

.en__component--copyblock.plan-uk__explanation-text:has(
    + .en__component--copyblock.plan-uk__explanation-text
  ),
.en__component--copyblock.plan-uk__intro-text:has(
    + .en__component--copyblock.plan-uk__intro-text
  ),
.en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__intro-text
  ):has(
    + .en__component--copyblock:not(.plan-uk__explanation-text):not(
        .plan-uk__intro-text
      )
  ) {
  padding-bottom: 0;
}

.en__component--copyblock.plan-uk__explanation-text
  + .en__component--copyblock.plan-uk__explanation-text,
.en__component--copyblock.plan-uk__intro-text
  + .en__component--copyblock.plan-uk__intro-text,
.en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__intro-text
  ):not(.plan-uk__skip-to-form)
  + .en__component--copyblock:not(.plan-uk__explanation-text):not(
    .plan-uk__intro-text
  ) {
  padding-top: 0;
}

.en__component--copyblock.plan-uk__explanation-text {
  background-color: var(--plan-uk-colour-lightest-blue);
}

.en__component--copyblock.plan-uk__intro-text {
  background-color: var(--plan-uk-colour-blue);
  color: white;
}

.en__component--copyblock.plan-uk__intro-text h1,
.en__component--copyblock.plan-uk__intro-text .h1,
.en__component--copyblock.plan-uk__intro-text .h1a,
.en__component--copyblock.plan-uk__intro-text .h1b {
  color: white !important;
}

.en__component--copyblock.plan-uk__intro-text h2,
.en__component--copyblock.plan-uk__intro-text .h2 {
  text-align: center;
}

.en__component--copyblock.plan-uk__intro-text h1 + hr,
.en__component--copyblock.plan-uk__intro-text .h1 + hr,
.en__component--copyblock.plan-uk__intro-text .h1a + hr,
.en__component--copyblock.plan-uk__intro-text .h1b + hr,
.en__component--copyblock.plan-uk__intro-text h2 + hr,
.en__component--copyblock.plan-uk__intro-text .h2 + hr,
.en__component--copyblock.plan-uk__intro-text h3 + hr,
.en__component--copyblock.plan-uk__intro-text .h3 + hr {
  background-image: url(images/focus3-yellow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  height: 3.5rem;
  margin: 1rem auto;
  width: 100%;
}

.en__component--copyblock.plan-uk__intro-text h1 + hr,
.en__component--copyblock.plan-uk__intro-text .h1 + hr,
.en__component--copyblock.plan-uk__intro-text .h1a + hr,
.en__component--copyblock.plan-uk__intro-text .h1b + hr {
  margin: calc(var(--plan-uk-spacer) * -1.5) auto var(--plan-uk-spacer);
}

.en__component--copyblock.plan-uk__intro-text h1 u,
.en__component--copyblock.plan-uk__intro-text .h1 u,
.en__component--copyblock.plan-uk__intro-text .h1a u,
.en__component--copyblock.plan-uk__intro-text .h1b u,
.en__component--copyblock.plan-uk__intro-text h2 u,
.en__component--copyblock.plan-uk__intro-text .h2 u,
.en__component--copyblock.plan-uk__intro-text h3 u,
.en__component--copyblock.plan-uk__intro-text .h3 u {
  text-decoration: none;
}

.en__component--copyblock.plan-uk__intro-text h1 u::after,
.en__component--copyblock.plan-uk__intro-text .h1 u::after,
.en__component--copyblock.plan-uk__intro-text h2 u::after,
.en__component--copyblock.plan-uk__intro-text .h2 u::after,
.en__component--copyblock.plan-uk__intro-text h3 u::after,
.en__component--copyblock.plan-uk__intro-text .h3 u::after {
  background-image: url(images/underline-1-yellow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  content: "";
  height: 1.125rem;
  margin: 1rem auto var(--plan-uk-spacer);
  width: 100%;
}

.en__component--copyblock.plan-uk__intro-text ul li::marker {
  color: var(--plan-uk-colour-white);
}

.en__component--imageblock {
  position: relative;
}

.en__component--imageblock img,
#en__pagebuilder .en__component--imageblock img {
  height: auto !important;
  width: 100% !important;
}

.en__component--widgetblock {
  margin: 0;
  padding: var(--plan-uk-spacer) var(--plan-uk-spacer) 0;
}

.en__component--widgetblock:has(
    + .en__component--copyblock:not.plan-uk__latest-action-takers
  ) {
  padding-bottom: calc(var(--plan-uk-spacer) / 2);
}

.enWidget {
  margin: 0 auto;
  max-width: 30.5rem;
  padding: 0 0 calc(var(--plan-uk-spacer) / 2) !important;
}

.en__component--widgetblock:has(+ .plan-uk__latest-action-takers) .enWidget {
  padding-bottom: 0 !important;
}

.enWidget__bar {
  border-radius: 0 !important;
}

.enWidget__copy,
.enWidget__copy p {
  color: white;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.25;
}

.enWidget__copy p {
  margin: 0 !important;
}

.enWidget__copy b,
.enWidget__copy p b,
.enWidget__copy strong,
.enWidget__copy p strong {
  font-weight: bold;
}

.enWidget__fill {
  background-color: var(--plan-uk-colour-magenta) !important;
  border-radius: 0 !important;
}

.enWidget__fill__count {
  display: none;
}

.enWidget__progress {
  background-color: white !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  max-height: 1rem !important;
  min-height: 1rem !important;
}

/* In the first column of a 2 column row, or when next to a mobile skip to form link,
    assume that the widget is for mobile/tablet only and style differently, more minimal look */

.en__component--row--2 .en__component--column--1 .en__component--widgetblock,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .en__component--widgetblock,
.plan-uk__skip-to-form + .en__component--widgetblock,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) {
  background-color: var(--plan-uk-colour-blue);
  margin: 0;
  padding-bottom: calc(var(--plan-uk-spacer) / 2);
  padding-top: 0 !important;
}

@media screen and (min-width: 64em) {
  .en__component--row--2 .en__component--column--1 .en__component--widgetblock,
  .en__component--advrow:has(:nth-last-child(2):first-child)
    .en__component--advcolumn:first-child
    .en__component--widgetblock,
  .plan-uk__skip-to-form + .en__component--widgetblock,
  .en__component--widgetblock:has(+ .plan-uk__skip-to-form) {
    display: none;
  }
}

.en__component--row--2 .en__component--column--1 .enWidget,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget {
  border-bottom: none;
}

.en__component--row--2 .en__component--column--1 .enWidget__progress,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__progress,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__progress,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget__progress {
  max-height: 0.5rem !important;
  min-height: 0.5rem !important;
}

.en__component--row--2 .en__component--column--1 .enWidget__copy--below,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__copy--below,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__copy--below,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form)
  .enWidget__copy--below {
  margin-top: calc(var(--plan-uk-spacer) / 2);
}

.en__component--row--2 .en__component--column--1 .enWidget__copy,
.en__component--row--2 .en__component--column--1 .enWidget__copy p,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__copy,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__copy
  p,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__copy,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__copy p,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget__copy,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget__copy p {
  font-size: 1rem;
  font-weight: bold !important;
  line-height: 1 !important;
}

.en__component--row--2 .en__component--column--1 .enWidget__copy em,
.en__component--row--2 .en__component--column--1 .enWidget__copy p em,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__copy
  em,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .enWidget__copy
  p
  em,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__copy em,
.plan-uk__skip-to-form + .en__component--widgetblock .enWidget__copy p em,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget__copy em,
.en__component--widgetblock:has(+ .plan-uk__skip-to-form) .enWidget__copy p em {
  font-family: inherit !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.plan-uk__accordion {
  display: flex;
  flex-direction: column;
  gap: var(--plan-uk-spacer);
}

.plan-uk__accordion details {
  border: 1px solid var(--plan-uk-colour-light-grey);
  padding: 0 calc(var(--plan-uk-spacer) / 2);
}

.plan-uk__accordion summary {
  justify-content: space-between;
}

/* Image credit as a text block */
.plan-uk__extended-image-credit {
  color: var(--plan-uk-colour-dark-blue);
  font-size: 1rem;
}

/* Image credit overlaid on an image, with an info icon */
.plan-uk__image-credit {
  bottom: 0.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  left: 0.5rem;
  position: absolute;
}

.plan-uk__image-credit__summary {
  margin: 0;
}

.plan-uk__image-credit__summary::before {
  background-image: url(images/icon-info-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  filter: drop-shadow(0.1rem 0.1rem 0.1rem black);
  height: 1.5rem;
  margin-right: 0.5rem;
  opacity: 0.5;
  width: 1.5rem;
}

details.plan-uk__image-credit[open] > .plan-uk__image-credit__summary::before {
  opacity: 1;
}

.plan-uk__image-credit__summary::after {
  display: none;
}

.plan-uk__image-credit__text {
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  max-width: calc(100% - 2rem);
  padding: 0.5rem;
}

@media only screen and (min-width: 40em) {
  .plan-uk__image-credit {
    bottom: 1rem;
    left: 1rem;
  }

  .plan-uk__image-credit__text {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    max-width: calc(100% - 2rem);
    padding: 0.5rem;
  }
}

.plan-uk__latest-action-takers {
  color: white;
  margin: 0 auto;
  max-width: 33.5rem;
  padding-bottom: 1.5rem !important;
  padding-left: 0;
  padding-right: 0;
  visibility: hidden; /* hide it until the text is set, then we use Javascript to show it */
}

.plan-uk__latest-action-takers:has(+ .en__component--widgetblock) {
  margin-bottom: calc(-1 * var(--plan-uk-spacer) / 2);
  padding-bottom: 0 !important;
}

.en__component--widgetblock + .plan-uk__latest-action-takers {
  padding-top: 0;
}

#en__pagebuilder .plan-uk__latest-action-takers {
  display: block !important;
}

.plan-uk__latest-action-takers__icon {
  background-image: url(images/map-pin-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 2rem;
  margin-right: 0.5rem;
  width: 2rem;
}

/* Latest action takers in first column of a 2 column row -- set background colour to blue
    (otherwise, whatever the column background colour is will show through) */
.en__component--row--2 .en__component--column--1 .plan-uk__latest-action-takers,
.en__component--advrow:has(:nth-last-child(2):first-child)
  .en__component--advcolumn:first-child
  .plan-uk__latest-action-takers {
  background-color: var(--plan-uk-colour-blue);
}

.plan-uk__latest-action-takers__inner {
  border-bottom: 1px solid white;
}

.plan-uk__latest-action-takers__inner__content {
  align-items: center;
  display: flex;
  padding-bottom: 1.5rem;
  transition: opacity 0.5s ease-in-out;
}

/* This is the progress bar at the bottom of the screen, used on survey pages */
.plan-uk__progress-bar {
  align-items: center;
  background-color: var(--plan-uk-colour-blue);
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 1rem var(--plan-uk-spacer);
  position: fixed;
  width: 100%;
}

.plan-uk__progress-bar__bar {
  background-color: white;
  border-radius: 0;
  height: 1rem;
  max-width: calc(100% - var(--plan-uk-spacer) * 4);
  width: 100%;
}

@media only screen and (min-width: 40em) {
  .plan-uk__progress-bar__bar {
    max-width: calc(var(--plan-uk-spacer) * 20);
  }
}

.plan-uk__progress-bar__bar::-webkit-progress-bar {
  background-color: white;
  border-radius: 0;
  height: 1rem;
  width: 100%;
}

.plan-uk__progress-bar__bar::-webkit-progress-value {
  background-color: var(--plan-uk-colour-magenta);
  transition: width 0.5s ease-in-out;
}

.plan-uk__progress-bar__bar::-moz-progress-bar {
  background-color: var(--plan-uk-colour-magenta);
  transition: width 0.5s ease-in-out;
}

/* This is the steps progress indicator, commonly used on a thank you page for share/donate */
.plan-uk__progress-indicator {
  margin-bottom: var(--plan-uk-spacer);
  padding: 0 !important;
}

/* On large screens, break the progress indicator out of the padding on .plan-uk__wrapper__inner */
@media only screen and (min-width: 76em) {
  .plan-uk__progress-indicator {
    margin: calc(var(--plan-uk-spacer) * -1.5)
      calc(var(--plan-uk-spacer) * -1.75) var(--plan-uk-spacer);
    max-width: calc(100% + var(--plan-uk-spacer) * 3.25);
    width: calc(100% + var(--plan-uk-spacer) * 3.25);
  }
}

.plan-uk__progress-indicator__container {
  background-color: var(--plan-uk-colour-lightest-grey);
  display: flex;
  justify-content: center;
  padding: 1rem;
  width: 100%;
}

.plan-uk__progress-indicator__list {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-uk__progress-indicator__list__item {
  align-items: center;
  display: flex;
  font-family: "Core Paint", "helvetica neue", "Helvetica", sans-serif;
  margin-bottom: 0 !important;
  text-transform: uppercase;
}

.plan-uk__progress-indicator__list__item--current {
  color: var(--plan-uk-colour-blue);
}

.plan-uk__progress-indicator__list__item:not(:last-child)::after {
  background-image: url(images/chevron-mid-grey.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  margin-left: 0.5rem;
  max-height: var(--plan-uk-spacer);
  max-width: var(--plan-uk-spacer);
  min-height: var(--plan-uk-spacer);
  min-width: var(--plan-uk-spacer);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.plan-uk__progress-indicator__list__item__bullet {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 0.125rem solid var(--plan-uk-colour-dark-blue);
  border-radius: 50%;
  display: inline-block;
  justify-content: center;
  margin-bottom: 0;
  margin-right: 0.5rem;
  max-height: var(--plan-uk-spacer);
  max-width: var(--plan-uk-spacer);
  min-height: var(--plan-uk-spacer);
  min-width: var(--plan-uk-spacer);
  padding-right: 0.5rem;
  position: relative;
}

.plan-uk__progress-indicator__list__item--completed
  .plan-uk__progress-indicator__list__item__bullet {
  background-color: var(--plan-uk-colour-dark-blue);
  background-image: url(images/tick-white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  border-color: var(--plan-uk-colour-dark-blue);
}

.plan-uk__progress-indicator__list__item--current
  .plan-uk__progress-indicator__list__item__bullet {
  border-color: var(--plan-uk-colour-blue);
}

.plan-uk__progress-indicator__list__item--current
  .plan-uk__progress-indicator__list__item__bullet::after {
  background-color: var(--plan-uk-colour-blue);
  border-radius: 50%;
  content: "";
  height: 60%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

.plan-uk__skip-to-form {
  background-color: var(--plan-uk-colour-blue);
}

@media screen and (min-width: 64em) {
  .plan-uk__skip-to-form {
    display: none;
  }
}

#en__pagebuilder .plan-uk__skip-to-form {
  display: block !important;
}

.plan-uk__skip-to-form:has(+ .en__component--widgetblock) {
  padding-bottom: 0;
}

.plan-uk__skip-to-form .plan-uk__button {
  margin-top: 0 !important;
}

/**************

  Forms

  **************/

.address-loqate-manual-entry-container {
  display: block;
  font-size: 0.9rem !important;
  margin: -0.25rem 0 1rem !important;
  width: 100%;
}

#address-loqate-manual-entry {
  color: inherit !important;
  cursor: pointer;
  text-decoration: underline;
}

button,
.button,
.button:link,
.button:visited,
.plan-uk__button,
.plan-uk__button:link,
.plan-uk__button:visited,
.en__component--tweetcontactblock ~ .en__component--formblock button,
.en__tweetButton > .en__tweetButton__send,
.en__tweetButton > .en__tweetButton__sent {
  background-color: var(--plan-uk-colour-blue);
  background-position: 100% 0;
  background-size: 200% 100%;
  border: 1px solid var(--plan-uk-colour-blue);
  color: white;
  cursor: pointer;
  display: block;
  font-family: "Core Paint", "helvetica neue", "Helvetica", sans-serif;
  font-size: 1.125rem;
  height: calc(var(--plan-uk-spacer) * 2);
  line-height: 1.225;
  margin: 1rem auto;
  max-width: 30.5rem;
  padding: calc(var(--plan-uk-spacer) / 2) var(--plan-uk-spacer)
    calc(var(--plan-uk-spacer) / 2);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}

@media screen and (min-width: 40em) {
  button,
  .button,
  .plan-uk__button,
  .en__component--tweetcontactblock ~ .en__component--formblock button,
  .en__tweetButton > .en__tweetButton__send,
  .en__tweetButton > .en__tweetButton__sent {
    font-size: 1.625rem;
    line-height: 1.27;
    padding: 0.5rem var(--plan-uk-spacer) calc(var(--plan-uk-spacer) / 2);
  }
}

button:hover,
button:active,
button:focus,
.button:hover,
.button:active,
.button:focus,
.plan-uk__button:hover,
.plan-uk__button:active,
.plan-uk__button:focus {
  background-color: white;
  color: var(--plan-uk-colour-blue);
}

.en__submit button,
.en__tweetButton > .en__tweetButton__send,
.en__tweetButton > .en__tweetButton__sent,
.plan-uk__skip-to-form .plan-uk__button,
.plan-uk__skip-to-form .plan-uk__button:link,
.plan-uk__skip-to-form .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-yellow);
  border-color: var(--plan-uk-colour-yellow);
  border-radius: 0;
  color: var(--plan-uk-colour-dark-blue);
  font-size: 1.75rem;
  height: calc(var(--plan-uk-spacer) * 2.5);
  line-height: 1.225;
  padding-top: calc(var(--plan-uk-spacer) / 2);
}

@media only screen and (min-width: 40em) {
  .en__submit button,
  .en__tweetButton > .en__tweetButton__send,
  .en__tweetButton > .en__tweetButton__sent,
  .plan-uk__skip-to-form .plan-uk__button,
  .plan-uk__skip-to-form .plan-uk__button:link,
  .plan-uk__skip-to-form .plan-uk__button:visited {
    font-size: 2.5rem;
    height: calc(var(--plan-uk-spacer) * 3);
  }
}

.en__submit button:hover,
.en__submit button:active,
.en__submit button:focus,
.en__tweetButton > .en__tweetButton__send:hover,
.en__tweetButton > .en__tweetButton__send:active,
.en__tweetButton > .en__tweetButton__send:focus,
.en__tweetButton > .en__tweetButton__sent:hover,
.en__tweetButton > .en__tweetButton__sent:active,
.en__tweetButton > .en__tweetButton__sent:focus,
.plan-uk__skip-to-form .plan-uk__button:hover,
.plan-uk__skip-to-form .plan-uk__button:active,
.plan-uk__skip-to-form .plan-uk__button:focus {
  background-color: white;
  color: var(--plan-uk-colour-dark-blue);
}

.en__tweetButton > .en__tweetButton__sent {
  background: var(--plan-uk-colour-new-grey) !important;
  border-color: var(--plan-uk-colour-new-grey) !important;
  color: var(--plan-uk-colour-dark-blue) !important;
  display: none;
}

.en__tweetButton a {
  color: inherit !important;
  display: inline !important;
  font-size: 1.75rem !important;
  font-weight: inherit !important;
  padding: inherit !important;
}

@media screen and (min-width: 40em) {
  .en__tweetButton a {
    font-size: 2.5rem !important;
    padding: 0.25rem 0 0 !important;
  }
}

.en__tweetButton__sent a {
  cursor: default !important;
}

.plan-uk__button--blue,
.plan-uk__button--blue:link,
.plan-uk__button--blue:visited,
.plan-uk__buttons--blue button,
.plan-uk__buttons--blue .plan-uk__button,
.plan-uk__buttons--blue .plan-uk__button:link,
.plan-uk__buttons--blue .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-blue) !important;
  border-color: var(--plan-uk-colour-blue) !important;
  color: white !important;
}

.plan-uk__button--blue:hover,
.plan-uk__button--blue:active,
.plan-uk__button--blue:focus,
.plan-uk__buttons--blue button:hover,
.plan-uk__buttons--blue button:active,
.plan-uk__buttons--blue button:focus,
.plan-uk__buttons--blue .plan-uk__button:hover,
.plan-uk__buttons--blue .plan-uk__button:active,
.plan-uk__buttons--blue .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-blue) !important;
}

.plan-uk__button--blue-outline,
.plan-uk__button--blue-outline:link,
.plan-uk__button--blue-outline:visited,
.plan-uk__buttons--blue-outline button,
.plan-uk__buttons--blue-outline .plan-uk__button,
.plan-uk__buttons--blue-outline .plan-uk__button:link,
.plan-uk__buttons--blue-outline .plan-uk__button:visited {
  background-color: transparent !important;
  border-color: var(--plan-uk-colour-blue) !important;
  color: var(--plan-uk-colour-blue) !important;
}

.plan-uk__button--blue-outline:hover,
.plan-uk__button--blue-outline:active,
.plan-uk__button--blue-outline:focus,
.plan-uk__buttons--blue-outline button:hover,
.plan-uk__buttons--blue-outline button:active,
.plan-uk__buttons--blue-outline button:focus,
.plan-uk__buttons--blue-outline .plan-uk__button:hover,
.plan-uk__buttons--blue-outline .plan-uk__button:active,
.plan-uk__buttons--blue-outline .plan-uk__button:focus {
  background-color: var(--plan-uk-colour-blue) !important;
  color: white !important;
}

.plan-uk__button--dark-blue,
.plan-uk__button--dark-blue:link,
.plan-uk__button--dark-blue:visited,
.plan-uk__buttons--dark-blue button,
.plan-uk__buttons--dark-blue .plan-uk__button,
.plan-uk__buttons--dark-blue .plan-uk__button:link,
.plan-uk__buttons--dark-blue .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-dark-blue) !important;
  border-color: var(--plan-uk-colour-dark-blue) !important;
  color: white !important;
}

.plan-uk__button--dark-blue:hover,
.plan-uk__button--dark-blue:active,
.plan-uk__button--dark-blue:focus,
.plan-uk__buttons--dark-blue button:hover,
.plan-uk__buttons--dark-blue button:active,
.plan-uk__buttons--dark-blue button:focus,
.plan-uk__buttons--dark-blue .plan-uk__button:hover,
.plan-uk__buttons--dark-blue .plan-uk__button:active,
.plan-uk__buttons--dark-blue .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__button--light-blue,
.plan-uk__button--light-blue:link,
.plan-uk__button--light-blue:visited,
.plan-uk__buttons--light-blue button,
.plan-uk__buttons--light-blue .plan-uk__button,
.plan-uk__buttons--light-blue .plan-uk__button:link,
.plan-uk__buttons--light-blue .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-light-blue) !important;
  border-color: var(--plan-uk-colour-light-blue) !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__button--light-blue:hover,
.plan-uk__button--light-blue:active,
.plan-uk__button--light-blue:focus,
.plan-uk__buttons--light-blue button:hover,
.plan-uk__buttons--light-blue button:active,
.plan-uk__buttons--light-blue button:focus,
.plan-uk__buttons--light-blue .plan-uk__button:hover,
.plan-uk__buttons--light-blue .plan-uk__button:active,
.plan-uk__buttons--light-blue .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__button--magenta,
.plan-uk__button--magenta:link,
.plan-uk__button--magenta:visited,
.plan-uk__buttons--magenta button,
.plan-uk__buttons--magenta .plan-uk__button,
.plan-uk__buttons--magenta .plan-uk__button:link,
.plan-uk__buttons--magenta .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-magenta) !important;
  border-color: var(--plan-uk-colour-magenta) !important;
  color: white !important;
}

.plan-uk__button--magenta:hover,
.plan-uk__button--magenta:active,
.plan-uk__button--magenta:focus,
.plan-uk__buttons--magenta button:hover,
.plan-uk__buttons--magenta button:active,
.plan-uk__buttons--magenta button:focus,
.plan-uk__buttons--magenta .plan-uk__button:hover,
.plan-uk__buttons--magenta .plan-uk__button:active,
.plan-uk__buttons--magenta .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-magenta) !important;
}

.plan-uk__button--mid-grey,
.plan-uk__button--mid-grey:link,
.plan-uk__button--mid-grey:visited,
.plan-uk__buttons--mid-grey button,
.plan-uk__buttons--mid-grey .plan-uk__button,
.plan-uk__buttons--mid-grey .plan-uk__button:link,
.plan-uk__buttons--mid-grey .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-mid-grey) !important;
  border-color: var(--plan-uk-colour-mid-grey) !important;
  color: white !important;
}

.plan-uk__button--mid-grey:hover,
.plan-uk__button--mid-grey:active,
.plan-uk__button--mid-grey:focus,
.plan-uk__buttons--mid-grey button:hover,
.plan-uk__buttons--mid-grey button:active,
.plan-uk__buttons--mid-grey button:focus,
.plan-uk__buttons--mid-grey .plan-uk__button:hover,
.plan-uk__buttons--mid-grey .plan-uk__button:active,
.plan-uk__buttons--mid-grey .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-mid-grey) !important;
}

.plan-uk__button--red,
.plan-uk__button--red:link,
.plan-uk__button--red:visited,
.plan-uk__buttons--red button,
.plan-uk__buttons--red .plan-uk__button,
.plan-uk__buttons--red .plan-uk__button:link,
.plan-uk__buttons--red .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-red) !important;
  border-color: var(--plan-uk-colour-red) !important;
  color: white !important;
}

.plan-uk__button--red:hover,
.plan-uk__button--red:active,
.plan-uk__button--red:focus,
.plan-uk__buttons--red button:hover,
.plan-uk__buttons--red button:active,
.plan-uk__buttons--red button:focus,
.plan-uk__buttons--red .plan-uk__button:hover,
.plan-uk__buttons--red .plan-uk__button:active,
.plan-uk__buttons--red .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-red) !important;
}

.plan-uk__button--small,
.plan-uk__buttons--small button,
.plan-uk__buttons--small .plan-uk__button {
  max-width: 12rem !important;
}

.plan-uk__button--white-outline,
.plan-uk__button--white-outline:link,
.plan-uk__button--white-outline:visited,
.plan-uk__buttons--white-outline button,
.plan-uk__buttons--white-outline .plan-uk__button,
.plan-uk__buttons--white-outline .plan-uk__button:link,
.plan-uk__buttons--white-outline .plan-uk__button:visited {
  background-color: transparent !important;
  border-color: white !important;
  color: white !important;
}

.plan-uk__button--white-outline:hover,
.plan-uk__button--white-outline:active,
.plan-uk__button--white-outline:focus,
.plan-uk__buttons--white-outline button:hover,
.plan-uk__buttons--white-outline button:active,
.plan-uk__buttons--white-outline button:focus,
.plan-uk__buttons--white-outline .plan-uk__button:hover,
.plan-uk__buttons--white-outline .plan-uk__button:active,
.plan-uk__buttons--white-outline .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__button--yellow,
.plan-uk__button--yellow:link,
.plan-uk__button--yellow:visited,
.plan-uk__buttons--yellow button,
.plan-uk__buttons--yellow .plan-uk__button,
.plan-uk__buttons--yellow .plan-uk__button:link,
.plan-uk__buttons--yellow .plan-uk__button:visited {
  background-color: var(--plan-uk-colour-yellow) !important;
  border-color: var(--plan-uk-colour-yellow) !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__button--yellow:hover,
.plan-uk__button--yellow:active,
.plan-uk__button--yellow:focus,
.plan-uk__buttons--yellow button:hover,
.plan-uk__buttons--yellow button:active,
.plan-uk__buttons--yellow button:focus,
.plan-uk__buttons--yellow .plan-uk__button:hover,
.plan-uk__buttons--yellow .plan-uk__button:active,
.plan-uk__buttons--yellow .plan-uk__button:focus {
  background-color: white !important;
  color: var(--plan-uk-colour-dark-blue) !important;
}

button:disabled,
button:disabled:hover,
.plan-uk__button:disabled,
.plan-uk__button:disabled:hover,
.plan-uk__button--disabled,
.plan-uk__button--disabled:hover,
.plan-uk__button[data-disabled="true"],
.plan-uk__button[data-disabled="true"]:hover,
.plan-uk__buttons button:disabled,
.plan-uk__buttons button:disabled:hover {
  background-color: var(--plan-uk-colour-dark-blue) !important;
  color: var(--plan-uk-colour-light-grey) !important;
}

/* Reduce vertical spacing on text blocks within a form */
.en__component--formblock + .en__component--copyblock {
  padding-bottom: calc(var(--plan-uk-spacer) / 2);
  padding-top: calc(var(--plan-uk-spacer) / 2);
}

.en__component--formblock .en__field,
.en__component--formblock .en__captcha {
  padding-bottom: 0;
}

.en__component--column > .en__component--contactblock,
.en__component--column > .en__component--tweetcontactblock {
  background-color: var(--plan-uk-colour-dark-blue);
}

@media only screen and (min-width: 64em) {
  .en__component--row--1 .en__component--column > .en__component--contactblock,
  .en__component--row--1 .en__component--column > .en__component--formblock,
  .en__component--row--1
    .en__component--column
    > .en__component--tweetcontactblock {
    margin: 0 calc(var(--plan-uk-spacer) * -0.75 - 2px);
    max-width: calc(100% + var(--plan-uk-spacer) * 1.5 - 4px);
    width: calc(100% + var(--plan-uk-spacer) * 1.5 - 4px);
  }
}

@media only screen and (min-width: 76em) {
  .en__component--row--1 .en__component--column > .en__component--contactblock,
  .en__component--row--1 .en__component--column > .en__component--formblock,
  .en__component--row--1
    .en__component--column
    > .en__component--tweetcontactblock {
    margin: 0 calc(var(--plan-uk-spacer) * -2);
    max-width: calc(100% + var(--plan-uk-spacer) * 4);
    width: calc(100% + var(--plan-uk-spacer) * 4);
  }
}

.en__component--column > .en__component--formblock {
  background-color: var(--plan-uk-colour-dark-blue);
}

.en__contact:only-child .en__contact__toggle {
  display: none;
}

.en__contact:not(:last-child) {
  border-bottom: 1px solid white;
  padding-bottom: var(--plan-uk-spacer);
}

.en__contact > .en__contact__detail {
  background-color: transparent;
  margin: 0 auto;
  max-width: 42rem;
}

.en__contact .en__contact__toggle {
  background-color: transparent !important;
  background-image: url(images/chevron-white.svg) !important;
}

.en__contact--open .en__contact__toggle {
  transform: rotate(180deg);
}

.en__contactDetail {
  color: white;
}

.en__contactDetails,
.en__tweetContact {
  margin: var(--plan-uk-spacer) 0;
}

.en__contactMessage > textarea {
  height: 12rem !important;
}

.en__errorHeader {
  background-color: var(--plan-uk-colour-red);
  color: white;
  padding: 1rem;
}

ul.en__errorList {
  background-color: var(--plan-uk-colour-red);
  color: white;
  list-style-position: inside;
  margin-bottom: 2rem !important;
}

/* Hide error list at top of page if empty */
ul.en__errorList:not(:has(*)) {
  display: none;
}

.en__errorList li.en__error {
  padding: 0 1rem 0.5rem !important;
}

.en__field.en__mandatory > label::after {
  content: "*";
  display: inline;
}

.en__field--address-results label {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

.en__field--checkbox,
.en__field--radio {
  margin-bottom: calc(var(--plan-uk-spacer) / 2);
}

.en__field--checkbox .en__field__error,
.en__field--radio .en__field__error {
  margin-top: 0.25rem;
}

.en__field__element--textarea + .en__field__error {
  margin-top: -1.5rem;
}

.en__field__element {
  width: 100%;
}

.en__field__element:has(~ .en__field__error) input,
.en__field__element:has(~ .en__field__error) select,
.en__field__element:has(~ .en__field__error) textarea {
  border-color: var(--plan-uk-colour-red);
  border-width: 2px;
}

/* Make yes/no checkboxes and radio buttons stack choices horizontally */
.en__field__element--checkbox:has(input[type="checkbox"][value="Y"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="y"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="YES"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="Yes"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="yes"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="N"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="n"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="NO"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="No"]),
.en__field__element--checkbox:has(input[type="checkbox"][value="no"]),
.en__field__element--radio:has(input[type="radio"][value="Y"]),
.en__field__element--radio:has(input[type="radio"][value="y"]),
.en__field__element--radio:has(input[type="radio"][value="YES"]),
.en__field__element--radio:has(input[type="radio"][value="Yes"]),
.en__field__element--radio:has(input[type="radio"][value="yes"]),
.en__field__element--radio:has(input[type="radio"][value="N"]),
.en__field__element--radio:has(input[type="radio"][value="n"]),
.en__field__element--radio:has(input[type="radio"][value="NO"]),
.en__field__element--radio:has(input[type="radio"][value="No"]),
.en__field__element--radio:has(input[type="radio"][value="no"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.en__field__element--checkbox .en__field__item,
.en__field__element--radio .en__field__item {
  align-items: center;
  display: flex;
}

.en__field__element--checkbox .en__field__item label,
.en__field__element--radio .en__field__item label {
  line-height: 1.3;
}

.en__field__element--radio .en__field__item--other {
  flex-direction: column;
  width: 100%;
}

.en__field__element--radio .en__field__item--other label {
  width: 100%;
}

/* Stack opt-in labels and choices horizontally */

.en__field--email-opt-in,
.en__field--mail-opt-in,
.en__field--phone-opt-in,
.en__field--post-opt-in,
.en__field--sms-opt-in {
  display: flex;
  flex-wrap: wrap;
}

.en__field--email-opt-in label,
.en__field--mail-opt-in label,
.en__field--phone-opt-in label,
.en__field--post-opt-in label,
.en__field--sms-opt-in label {
  max-width: 100px;
  width: 30% !important;
}

.en__field--email-opt-in .en__field__element--radio,
.en__field--mail-opt-in .en__field__element--radio,
.en__field--phone-opt-in .en__field__element--radio,
.en__field--post-opt-in .en__field__element--radio,
.en__field--sms-opt-in .en__field__element--radio {
  width: 70% !important;
}

/* Fit the 'enter your postcode to find your address' field and button onto same line */

.en__field--postcode-lookup input {
  display: inline-block;
  max-width: calc(50% - 0.5rem);
  width: calc(50% - 0.5rem);
}

.en__field--postcode-lookup input[type="button"] {
  max-width: calc(60% - 0.5rem);
  width: calc(60% - 0.5rem);
}

.en__field--postcode-lookup input[type="text"] {
  max-width: calc(40% - 0.5rem);
  width: calc(40% - 0.5rem);
}

/* At very small screen sizes, adjust widths so button text fits on */
@media screen and (min-width: 400px) {
  .en__field--postcode-lookup input[type="button"],
  .en__field--postcode-lookup input[type="text"] {
    max-width: calc(50% - 0.5rem);
    width: calc(50% - 0.5rem);
  }
}

.en__field__error {
  background-color: var(--plan-uk-colour-red);
  color: white;
  margin: -1rem 0 calc(var(--plan-uk-spacer) / 2);
  padding: 0.5rem;
  width: 100%;
}

.en__field .en__field__label,
.en__field label,
.en__component--contactblock label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

@media only screen and (min-width: 40em) {
  .en__field .en__field__label,
  .en__field label,
  .en__component--contactblock label {
    font-size: 1.188rem;
    line-height: 1.368;
  }
}

.en__field > .en__field__label,
.en__field > label,
.en__component--contactblock label {
  width: 100%;
}

.en__submit {
  padding: 0 0 1rem;
}

.en__submit button {
  margin-bottom: 0;
}

.en__submit--disabled > button {
  cursor: progress;
}

.en__tweet,
.en__tweetBackgroundText,
.en__tweetButton,
.en__tweetDisabled,
.en__twitterTarget {
  background-color: transparent !important;
}

.en__tweetBackgroundToggle {
  display: none;
}

.en__tweetBackgroundText {
  display: block !important;
}

.en__tweetBackgroundText pre {
  border-top: none !important;
  color: white !important;
}

.en__component--tweetcontactblock > .en__contacts > .en__tweetContact {
  background-color: transparent !important;
  max-width: 44rem;
  width: 100%;
}

.en__twitterTarget p {
  line-height: 1.6 !important;
}

/* 'Find my address' button */
.envalidate-loqate-find-address {
  margin: 0 0 1rem 1rem;
  vertical-align: bottom;
}

.en__contactMessage > textarea,
.en__field__element > .en__field__input--calendar,
.en__field__element > .en__field__input--email,
.en__field__element > .en__field__input--number,
.en__field__element > .en__field__input--password,
.en__field__element > .en__field__input--range,
.en__field__element > .en__field__input--telephone,
.en__field__element > .en__field__input--text,
.en__field__element > .en__field__input--textarea,
.en__field__element > .en__rangeFieldLabels,
input:not([type="button"]):not([type="submit"]),
select,
textarea {
  border: 1px solid var(--plan-uk-colour-light-grey);
  color: var(--plan-uk-colour-dark-blue);
  font-family: "Helvetica LT Std Roman";
  font-size: 1rem;
  line-height: 1.5;
  height: calc(var(--plan-uk-spacer) * 2);
  padding: 0.5rem calc(var(--plan-uk-spacer) / 2);
  width: 100%;
}

.en__field__element > .en__field__input--textarea,
textarea {
  height: 8rem;
}

@media only screen and (min-width: 40em) {
  .en__contactMessage > textarea,
  .en__field__element > .en__field__input--calendar,
  .en__field__element > .en__field__input--email,
  .en__field__element > .en__field__input--number,
  .en__field__element > .en__field__input--password,
  .en__field__element > .en__field__input--range,
  .en__field__element > .en__field__input--telephone,
  .en__field__element > .en__field__input--text,
  .en__field__element > .en__field__input--textarea,
  .en__field__element > .en__rangeFieldLabels,
  input:not([type="button"]):not([type="submit"]),
  select,
  textarea {
    font-size: 1.188rem;
    line-height: 1.368;
  }
}

.en__field__element
  input:not(.button):not([type="checkbox"]):not([type="radio"]):hover,
.en__field__element select:hover,
.en__field__element textarea:hover {
  border: 1px solid var(--plan-uk-colour-blue);
  outline: 1px solid var(--plan-uk-colour-blue);
}

.en__field__element
  input:not(.button):not([type="checkbox"]):not([type="radio"]):focus,
.en__field__element select:focus,
.en__field__element textarea:focus {
  border: 1px solid var(--plan-uk-colour-yellow);
  outline: 1px solid var(--plan-uk-colour-yellow);
}

.en__twitterTarget__details {
  color: white;
}

.en__twitterTarget__details a:link,
.en__twitterTarget__details a:visited {
  color: white;
  text-decoration: underline;
}

.en__twitterTarget__details a:hover,
.en__twitterTarget__details a:active,
.en__twitterTarget__details a:focus {
  color: white;
  text-decoration: none;
}

input[type="checkbox"] {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 0.125rem solid var(--plan-uk-colour-light-grey);
  cursor: pointer;
  justify-content: center;
  margin-bottom: 0;
  max-height: var(--plan-uk-spacer);
  max-width: var(--plan-uk-spacer);
  min-height: var(--plan-uk-spacer);
  min-width: var(--plan-uk-spacer);
  padding: 0 !important;
  position: relative;
}

#en__pagebuilder input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="checkbox"]:checked {
  background-color: var(--plan-uk-colour-blue);
}

input[type="checkbox"]:hover {
  border-color: var(--plan-uk-colour-blue);
  border-width: 2px;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  border-color: var(--plan-uk-colour-yellow);
  border-width: 2px;
  outline: none;
}

input[type="checkbox"]:checked::after {
  background-image: url(images/tick-white.svg);
  background-repeat: no-repeat;
  content: "";
  height: 1rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
}

input[type="radio"] {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 0.125rem solid var(--plan-uk-colour-light-grey);
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  margin-bottom: 0;
  max-height: var(--plan-uk-spacer);
  max-width: var(--plan-uk-spacer);
  min-height: var(--plan-uk-spacer);
  min-width: var(--plan-uk-spacer);
  padding: 0 !important;
  position: relative;
}

input[type="radio"]:checked,
input[type="radio"]:hover {
  border-color: var(--plan-uk-colour-blue);
  border-width: 2px;
}

input[type="radio"]:focus,
input[type="radio"]:active {
  border-color: var(--plan-uk-colour-yellow);
  border-width: 2px;
  outline: none;
}

input[type="radio"]:checked::after {
  background-color: var(--plan-uk-colour-blue);
  border-radius: 50%;
  content: "";
  height: 0.8rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.8rem;
}

.plan-uk__form-arrow {
  display: flex;
  margin-bottom: -2.5rem;
}

.plan-uk__form-arrow::after {
  background-image: url(images/form-arrow-yellow.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 2.5rem;
  margin-left: 0.5rem;
  margin-top: var(--plan-uk-spacer);
  width: 2.5rem;
  z-index: 1;
}

@media only screen and (min-width: 40em) {
  .plan-uk__form-arrow {
    margin-bottom: -2rem;
  }

  .plan-uk__form-arrow::after {
    height: 3.5rem;
    width: 3.5rem;
  }
}

.plan-uk__mp {
  align-items: center;
  color: white;
  display: flex;
}

.plan-uk__mp__photo,
.en__twitterTarget__image {
  background-position: center;
  background-size: cover;
  border: 2px solid white;
  border-radius: 50%;
  display: none;
  margin-right: var(--plan-uk-spacer) !important;
  max-height: calc(var(--plan-uk-spacer) * 4);
  min-height: calc(var(--plan-uk-spacer) * 4);
  max-width: calc(var(--plan-uk-spacer) * 4);
  min-width: calc(var(--plan-uk-spacer) * 4);
}

.plan-uk__mp__text__name {
  font-weight: bold;
}

.plan-uk__opt-out-warning {
  background-color: white;
  border: 1px solid var(--plan-uk-colour-red);
  color: var(--plan-uk-colour-red) !important;
  display: none; /* hide it initially, we use Javascript to show it when needed */
  margin: 0 var(--plan-uk-spacer) var(--plan-uk-spacer);
  padding: calc(var(--plan-uk-spacer) / 2) !important;
  width: calc(100% - var(--plan-uk-spacer) * 2);
}

.plan-uk__opt-out-warning p {
  margin: -0.2rem 0 0;
}

/* Turn radio button choices into buttons by adding class plan-uk__radio--buttons */

.plan-uk__radio--buttons > .en__field__label,
.plan-uk__radio--buttons input[type="radio"] {
  /* Hide main label text except for screenreaders */
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
}

.plan-uk__radio--buttons .en__field__label--item {
  background-color: white;
  color: var(--plan-uk-colour-dark-blue) !important;
  margin-left: 0;
  margin-right: 0.5rem;
  min-width: 5rem;
  padding: 0.75rem 1rem;
  text-align: center;
}

.plan-uk__radio--buttons input[type="radio"]:checked ~ .en__field__label--item {
  background-color: var(--plan-uk-colour-blue) !important;
  color: white !important;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(images/chevron-blue.svg);
  background-position: right -1.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  padding-right: 2rem !important;
}

/* Remove default arrow in Edge */
select::-ms-expand {
  display: none;
}

/**************

  Surveys

  **************/

form[action*="survey"] .en__component--row .en__component--column {
  background-color: transparent;
}

.en__component--copyblock:has(~ .en__component--svblock) {
  background-color: var(--plan-uk-colour-blue-slightly-transparent);
}

.en__component--svblock ~ .en__component--copyblock,
.en__component--svblock ~ .en__component--formblock {
  background-color: var(--plan-uk-colour-dark-blue-slightly-transparent);
  color: white;
}

.en__component--svblock {
  margin: 0 auto;
  max-width: calc(100% - var(--plan-uk-spacer) * 2);
}

@media only screen and (min-width: 64em) {
  .en__component--svblock {
    max-width: 100%;
  }
}

.en__component--svblock,
.en__component--row .en__component--column .en__component--svblock label {
  color: var(--plan-uk-colour-dark-blue);
}

.en__field--survey {
  background-color: var(--plan-uk-colour-lightest-blue-slightly-transparent);
  /* Set question vertical margins so that the question height plus the vertical margins always fills the screen height,
      with the question vertically centred */
  margin: calc(50vh - var(--element-height, 0px) / 2) auto
    calc(50vh - var(--element-height, 0px) / 2);
  margin: calc(50vh - var(--element-height, 0px) / 2) auto
    calc(50svh - var(--element-height, 0px) / 2);
  padding: var(--plan-uk-spacer);
}

.en__field--survey:first-child {
  margin-top: var(--plan-uk-spacer);
}

@media only screen and (min-width: 64em) {
  .en__field--survey:first-child {
    margin-top: 0;
  }
}

/**************

  Sharing

  **************/

.en__socialShares {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  max-width: 22rem;
  padding: 2rem 0;
  width: 100%;
}

.en__socialShare {
  align-items: center;
  display: flex;
  height: auto !important;
  letter-spacing: 0.5px;
  line-height: 1.1;
  padding: 0 !important;
  width: 100% !important;
}

.en__socialShare::before {
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: flex;
  height: 4rem;
  padding: 1rem;
  width: 4rem;
}

.en__socialShare::after {
  align-items: center;
  border-left: 1px solid white;
  color: white;
  display: flex;
  flex-grow: 1;
  font-size: 1.5rem;
  font-weight: bold;
  height: 4rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  text-align: center;
}

a.en__socialShare:link,
a.en__socialShare:visited,
a.en__socialShare:hover,
a.en__socialShare:active,
a.en__socialShare:focus {
  text-decoration: none;
}

a.en__socialShare--facebook:hover,
a.en__socialShare--facebook:active,
a.en__socialShare--facebook:focus,
a.en__socialShare--linkedin:hover,
a.en__socialShare--linkedin:active,
a.en__socialShare--linkedin:focus {
  filter: brightness(1.25);
}

a.en__socialShare--twitter:hover,
a.en__socialShare--twitter:active,
a.en__socialShare--twitter:focus {
  background-color: #444;
}

a.en__socialShare--whatsapp:hover,
a.en__socialShare--whatsapp:active,
a.en__socialShare--whatsapp:focus {
  filter: brightness(1.1);
}

.en__socialShare--facebook {
  background-color: var(--plan-uk-colour-facebook);
}

.en__socialShare--facebook::before {
  background-image: url(images/share-icon-facebook.svg);
  background-size: 70%;
}

.en__socialShare--facebook::after {
  content: "Share on Facebook";
}

.en__socialShare--linkedin {
  background-color: var(--plan-uk-colour-linkedin);
}

.en__socialShare--linkedin::before {
  background-image: url(images/share-icon-linkedin.svg);
  background-size: 70%;
}

.en__socialShare--linkedin::after {
  content: "Share on LinkedIn";
}

.en__socialShare--twitter {
  background-color: black;
}

.en__socialShare--twitter::before {
  background-image: url(images/share-icon-x.svg);
  background-size: 55%;
}

.en__socialShare--twitter::after {
  content: "Share on X";
}

.en__socialShare--whatsapp {
  background-color: var(--plan-uk-colour-whatsapp);
}

.en__socialShare--whatsapp::before {
  background-image: url(images/share-icon-whatsapp.svg);
  background-size: 90%;
}

.en__socialShare--whatsapp::after {
  content: "Share on WhatsApp";
}

/* Hide the built-in EN share icons, except for screenreaders. We'll replace with our own using pseudo elements */
.en__socialShare__image {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden;
  position: absolute;
  width: 1px !important;
}

/**************

  Helper classes

  **************/

/* Show/hide on different screen sizes */

@media only screen and (max-width: 39.999em) {
  .plan-uk__hide-on-mobile {
    display: none !important;
  }
}

@media only screen and (max-width: 63.999em) {
  .plan-uk__hide-on-mobile-tablet {
    display: none !important;
  }
}

@media only screen and (min-width: 40em) {
  .plan-uk__hide-on-tablet-desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 64em) {
  .plan-uk__hide-on-desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 76em) {
  .plan-uk__hide-on-large-desktop {
    display: none !important;
  }
}

/* Spacing */

.plan-uk__margin--bottom--none {
  margin-bottom: 0 !important;
}

.plan-uk__margin--bottom--small {
  margin-bottom: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__margin--bottom--medium {
  margin-bottom: var(--plan-uk-spacer) !important;
}

.plan-uk__margin--bottom--large {
  margin-bottom: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__margin--bottom--extra-large {
  margin-bottom: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__margin--left--none {
  margin-left: 0 !important;
}

.plan-uk__margin--left--small {
  margin-left: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__margin--left--medium {
  margin-left: var(--plan-uk-spacer) !important;
}

.plan-uk__margin--left--large {
  margin-left: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__margin--left--extra-large {
  margin-left: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__margin--right--none {
  margin-right: 0 !important;
}

.plan-uk__margin--right--small {
  margin-right: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__margin--right--medium {
  margin-right: var(--plan-uk-spacer) !important;
}

.plan-uk__margin--right--large {
  margin-right: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__margin--right--extra-large {
  margin-right: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__margin--top--none {
  margin-top: 0 !important;
}

.plan-uk__margin--top--small {
  margin-top: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__margin--top--medium {
  margin-top: var(--plan-uk-spacer) !important;
}

.plan-uk__margin--top--large {
  margin-top: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__margin--top--extra-large {
  margin-top: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__padding--bottom--none {
  padding-bottom: 0 !important;
}

.plan-uk__padding--bottom--small {
  padding-bottom: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__padding--bottom--medium {
  padding-bottom: var(--plan-uk-spacer) !important;
}

.plan-uk__padding--bottom--large {
  padding-bottom: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__padding--bottom--extra-large {
  padding-bottom: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__padding--left--none {
  padding-left: 0 !important;
}

.plan-uk__padding--left--small {
  padding-left: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__padding--left--medium {
  padding-left: var(--plan-uk-spacer) !important;
}

.plan-uk__padding--left--large {
  padding-left: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__padding--left--extra-large {
  padding-left: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__padding--right--none {
  padding-right: 0 !important;
}

.plan-uk__padding--right--small {
  padding-right: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__padding--right--medium {
  padding-right: var(--plan-uk-spacer) !important;
}

.plan-uk__padding--right--large {
  padding-right: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__padding--right--extra-large {
  padding-right: calc(var(--plan-uk-spacer) * 3) !important;
}

.plan-uk__padding--top--none {
  padding-top: 0 !important;
}

.plan-uk__padding--top--small {
  padding-top: calc(var(--plan-uk-spacer) / 2) !important;
}

.plan-uk__padding--top--medium {
  padding-top: var(--plan-uk-spacer) !important;
}

.plan-uk__padding--top--large {
  padding-top: calc(var(--plan-uk-spacer) * 2) !important;
}

.plan-uk__padding--top--extra-large {
  padding-top: calc(var(--plan-uk-spacer) * 3) !important;
}

/* Colours */

.plan-uk__background--blue {
  background-color: var(--plan-uk-colour-blue) !important;
}

.plan-uk__background--dark-blue {
  background-color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__background--light-blue {
  background-color: var(--plan-uk-colour-light-blue) !important;
}

.plan-uk__background--lighter-blue {
  background-color: var(--plan-uk-colour-lighter-blue) !important;
}

.plan-uk__background--lightest-blue {
  background-color: var(--plan-uk-colour-lightest-blue) !important;
}

.plan-uk__background--new-grey {
  background-color: var(--plan-uk-colour-new-grey) !important;
}

.plan-uk__background--light-grey {
  background-color: var(--plan-uk-colour-light-grey) !important;
}

.plan-uk__background--lightest-grey {
  background-color: var(--plan-uk-colour-lightest-grey) !important;
}

.plan-uk__background--mid-grey {
  background-color: var(--plan-uk-colour-mid-grey) !important;
}

.plan-uk__background--magenta {
  background-color: var(--plan-uk-colour-magenta) !important;
}

.plan-uk__background--red {
  background-color: var(--plan-uk-colour-red) !important;
}

.plan-uk__background--white {
  background-color: white !important;
}

.plan-uk__background--yellow {
  background-color: var(--plan-uk-colour-yellow) !important;
}

.plan-uk__text--blue {
  color: var(--plan-uk-colour-blue) !important;
}

.plan-uk__text--dark-blue {
  color: var(--plan-uk-colour-dark-blue) !important;
}

.plan-uk__text--light-blue {
  color: var(--plan-uk-colour-light-blue) !important;
}

.plan-uk__text--lighter-blue {
  color: var(--plan-uk-colour-lighter-blue) !important;
}

.plan-uk__text--lightest-blue {
  color: var(--plan-uk-colour-lightest-blue) !important;
}

.plan-uk__text--new-grey {
  color: var(--plan-uk-colour-new-grey) !important;
}

.plan-uk__text--light-grey {
  color: var(--plan-uk-colour-light-grey) !important;
}

.plan-uk__text--lightest-grey {
  color: var(--plan-uk-colour-lightest-grey) !important;
}

.plan-uk__text--mid-grey {
  color: var(--plan-uk-colour-mid-grey) !important;
}

.plan-uk__text--magenta {
  color: var(--plan-uk-colour-magenta) !important;
}

.plan-uk__text--red {
  color: var(--plan-uk-colour-red) !important;
}

.plan-uk__text--white {
  color: white !important;
}

.plan-uk__text--yellow {
  color: var(--plan-uk-colour-yellow) !important;
}

/* Screenreaders */

.plan-uk__screenreader-only {
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px !important;
}