@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
  --bs-font-sans-serif: 'Poppins', Arial, Helvetica, sans-serif;
  /* For text inputs, buttons etc. */
  --bs-border-radius: 4px;
  /* Light theme colour - for things like highlighting focused text input */
  --ect-theme-colour-light: rgb(240 180 0);
  /* Box shadow for in-focus input elements */
  --ect-input-focus-box-shadow: 0 0 0 4px var(--ect-theme-colour-light);
  /* Links, or things that are link-like */
  --bs-link-color: var(--ect-theme-colour-dark);
  --bs-link-hover-color: var(--ect-theme-colour-dark--darkest);


  /* Variables which can be set in site-wide settings */

  /* Theme colours */
  /* Dark - for things like buttons */
  --ect-theme-colour-dark: rgb(209 0 68);
  --ect-theme-colour-dark--darker: rgb(190 0 48);
  --ect-theme-colour-dark--darkest: rgb(180 0 40);
  --ect-theme-colour-dark--pale: rgb(255, 182, 206);

  /* Font size */
  --ect-font-size-small: 16px;
  --ect-font-size-med: 18px;
  --ect-font-size-large: 20px;

  /* Narrow screens */
  @media screen and (max-width: 600px) {
    /* Adjust the font sizes down */
    --ect-font-size-small: 10px;
    --ect-font-size-med: 12px;
    --ect-font-size-large: 14px;
  }

  /* Background colour */
  --ect-bg-light: rgb(253 251 249);
  --ect-bg-dark: var(--bs-gray-900);
  /* For things that need to be a bit darker than the dark-mode body bg */
  --ect-bg-dark-darker: rgb(20 20 20);

  --bs-warning-bg-subtle: #ffe387;
}

html {
  /* To accommodate the navbar when you scroll to an internal id */
  scroll-padding-top: 70px;
  font-size: var(--ect-font-size-med);
}
html.html--beta-banner-top {
  scroll-padding-top: 133px;
}

/**
 * Site-wide settings
 */

/* Font size */
html.font-size-small {
  font-size: var(--ect-font-size-small);
}
html.font-size-med {
  /* This is the default */
  font-size: var(--ect-font-size-med);
}
html.font-size-large {
  font-size: var(--ect-font-size-large);
}

/* Theme colour */
html.theme-colour-pink {
  /* This is the default, so these values are the same as in :root */
  --ect-theme-colour-dark: rgb(209 0 68);
  --ect-theme-colour-dark--darker: rgb(190 0 48);
  --ect-theme-colour-dark--darkest: rgb(180 0 40);
  --ect-theme-colour-links: rgb(255 97 97);
  --ect-theme-colour-links-hover: rgb(255 120 120);
}
html.theme-colour-green {
  --ect-theme-colour-dark: rgb(0 139 87);
  --ect-theme-colour-dark--darker: rgb(0 125 65);
  --ect-theme-colour-dark--darkest: rgb(0 110 50);
  --ect-theme-colour-links: rgb(0 176 110);
  --ect-theme-colour-links-hover: rgb(0 190 120);
}
html.theme-colour-blue {
  --ect-theme-colour-dark: rgb(0 100 233);
  --ect-theme-colour-dark--darker: rgb(0 85 220);
  --ect-theme-colour-dark--darkest: rgb(0 70 205);
  --ect-theme-colour-links: rgb(75 152 255);
  --ect-theme-colour-links-hover: rgb(80 170 255);
}
html.theme-colour-orange {
  --ect-theme-colour-dark: rgb(215 75 0);
  --ect-theme-colour-dark--darker: rgb(205 65 0);
  --ect-theme-colour-dark--darkest: rgb(195 55 0);
  --ect-theme-colour-links: rgb(255 102 21);
  --ect-theme-colour-links-hover: rgb(255 120 30);
}

/* Background colour - note Bootstrap already implements bunch of defaults for dark mode */

/* Light mode */
html:not([data-bs-theme="dark"]) {
  --bs-body-bg: var(--ect-bg-light);
}
/* Dark mode */
html[data-bs-theme="dark"] .card {
  background-color: var(--ect-bg-dark-darker);
}
html[data-bs-theme="dark"] .ect-card {
  background-color: var(--ect-bg-dark-darker);
}
html[data-bs-theme="dark"] .bg-warning-subtle {
  background-color: black !important;
}
html[data-bs-theme="dark"] .bg-secondary-subtle {
  background-color: black !important;
}
html[data-bs-theme="dark"] .ect-answer-summary-row__answer {
  color: var(--bs-gray-500);
}
html[data-bs-theme="dark"] .results-page__filters {
  background-color: var(--bs-gray-800);
}
html[data-bs-theme="dark"] .form-check-input {
  --bs-border-color: var(--bs-gray-500);
}
html[data-bs-theme="dark"] .offer-more-details-inner {
  background-color: var(--bs-gray-900);
}
html[data-bs-theme="dark"] .print-and-complete-container--fixed-top {
  background-color: var(--bs-gray-800);
}
html[data-bs-theme="dark"] .ect-requirement-met {
  color: var(--bs-teal);
}
html[data-bs-theme="dark"] .ect-requirement-met::before {
  color: var(--bs-teal);
}
html[data-bs-theme="dark"] .ect-requirement-not-met {
  color: var(--ect-theme-colour-dark--pale);
}
html[data-bs-theme="dark"] .ect-requirement-not-met::before {
  color: var(--ect-theme-colour-dark--pale);
}
html[data-bs-theme="dark"] a:not(.btn, .nav-link, .navbar-brand) {
  color: var(--ect-theme-colour-links);
}
html[data-bs-theme="dark"] a:not(.btn, .nav-link, .navbar-brand):hover {
  color: var(--ect-theme-colour-links-hover);
}

/* Grayscale mode */
html.ect-filter-grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

/* Grayscale + dark mode */
html.ect-filter-grayscale[data-bs-theme="dark"] a {
  color: var(--bs-gray-400);
}
html.ect-filter-grayscale[data-bs-theme="dark"] a:hover {
  color: var(--bs-gray-200);
}

html.ect-filter-grayscale[data-bs-theme="dark"] .card .ect-validation-input-message {
  background-color: var(--bs-gray-800);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}
.h1, h1 {
  margin-bottom: 1.5rem;
}
.h5, h5 {
  font-size: 1.15rem;
  font-weight: 600;
}
.h6, h6 {
  font-weight: 600;
}

/* Bullet point list with check icon instead of normal bullet */
.list-check-bullets {
  list-style: none;
}
.list-check-bullets li {
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
}
/* For some reason we can't use CSS variables for the fill colour, so we have to do this... */
.list-check-bullets li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="rgb(209 0 68)" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" /></svg>');
  position: absolute;
  left: -10px;
  top: 10px;
}
html.theme-colour-green .list-check-bullets li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="rgb(0 139 87)" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" /></svg>');
}
html.theme-colour-blue .list-check-bullets li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="rgb(0 100 233)" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" /></svg>');
}
html.theme-colour-orange .list-check-bullets li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="rgb(215 75 0)" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" /></svg>');
}

/* Ordered list - big numbers */
.olist-big-numbers {
  list-style: none;
  counter-reset: li;
  padding-left: 3rem;
}
.olist-big-numbers li {
  position: relative;
}
.olist-big-numbers > li + li {
  margin-top: 0.5rem;
}
.olist-big-numbers>li::before {
  counter-increment: li;
  content: counter(li);
  display: inline-block;
  position: absolute;
  left: -30px;
  width: 20px;
  height: 20px;
  top: 4px;
  border-radius: 10px;
  background-color: var(--ect-theme-colour-dark);
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Container for ensuring the footer is always at the bottom even if page content doesn't fill the page */
.ect-page-content-footer-container {
  display: flex;
  padding-top: 63px;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}
.ect-page-content-footer-container--advising {
  padding-top: 105px;
}
#ect-page-content {
  padding-bottom: 3rem;
}

/* Misc */

.text-bg-dark {
  background-color: rgba(20 20 20) !important;
}

.bg-secondary-subtle {
  background-color: #edf0f7 !important;
}

/* Input elements */

/* Text inputs */
.form-control, .form-select {
  --bs-border-width: 2px;
  --bs-border-color: var(--bs-gray-dark);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-border-color);
  box-shadow: var(--ect-input-focus-box-shadow);
}
/* Radios and checkboxes */
.form-check-input {
  cursor: pointer;
  --bs-border-color: var(--bs-gray-dark);
  --bs-border-width: 2px;
}
.form-check-input:checked {
  background-color: var(--ect-theme-colour-dark);
  border-color: var(--ect-theme-colour-dark);
}
.form-check-input:focus {
  box-shadow: var(--ect-input-focus-box-shadow);
  border-color: var(--bs-gray-dark);
}
.form-check-input:focus:checked {
  border-color: var(--ect-theme-colour-dark);
}
/* Buttons */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-focus-box-shadow: var(--ect-input-focus-box-shadow);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ect-theme-colour-dark);
  --bs-btn-border-color: var(--ect-theme-colour-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ect-theme-colour-dark--darker);
  --bs-btn-hover-border-color: var(--ect-theme-colour-dark--darker);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ect-theme-colour-dark--darkest);
  --bs-btn-active-border-color: var(--ect-theme-colour-dark--darkest);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--ect-theme-colour-dark);
  --bs-btn-disabled-border-color: var(--ect-theme-colour-dark);
}
.btn-dark {
  --bs-btn-bg: rgb(20 20 20);
  --bs-btn-border-color: rgb(20 20 20);
  --bs-btn-hover-bg: rgb(35 35 35);
  --bs-btn-hover-border-color: rgb(35 35 35);
  --bs-btn-active-bg: rgb(45 45 45);
  --bs-btn-active-border-color: rgb(45 45 45);
  --bs-btn-disabled-bg: rgb(20 20 20);
  --bs-btn-disabled-border-color: rgb(20 20 20);
}
.btn-lg {
  --bs-btn-padding-x: 1.2rem;
  --bs-btn-border-radius: 6px;
}
/* Button with right-pointing chevron */
.ect-right-arrow-button {
  position: relative;
  padding-right: calc(24px + var(--bs-btn-padding-x));
}
.accordion-button {
  font-weight: 600;
}
.accordion-button:focus {
  --bs-accordion-btn-focus-box-shadow: var(--ect-input-focus-box-shadow);
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-btn-color);
}

.ect-right-arrow-button::after {
  position: absolute;
  right: calc(var(--bs-btn-padding-x) - 8px); /* Normal padding doesn't look quite right */
  top: calc(50% - 12px);
  content: "";
  width: 24px;
  height: 24px;
  color: white;
  /* https://fonts.google.com/icons?selected=Material+Symbols+Outlined:chevron_right:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=right */
  /* https://github.com/google/material-design-icons/blob/master/LICENSE */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" fill="white" viewBox="0 -960 960 960" width="24"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" /></svg>');
}
.btn-lg.ect-right-arrow-button {
  padding-right: calc(32px + var(--bs-btn-padding-x));
}
.btn-lg.ect-right-arrow-button::after {
  width: 32px;
  height: 32px;
  top: calc(50% - 15px);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="32" fill="white" viewBox="0 -960 960 960" width="32"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" /></svg>');
  transition: margin 0.1s ease-in;
}
.btn-lg.ect-right-arrow-button:hover::after {
  margin-right: -6px;
}
.btn-lg.fs-5.ect-right-arrow-button::after {
  right:calc(var(--bs-btn-padding-x) - 6px);
  top: calc(50% - 16px);
}

/* Links */
a {
  color: var(--ect-theme-colour-dark);
}
a:hover {
  color: var(--ect-theme-colour-dark--darkest);
}
/* a[target="_blank"]:after {
  content: "↗";
} */

/* Labels for inputs - assume that anything with a "for" attribute has a corresponding input element */
label[for] {
  cursor: pointer;
}
/* Put a bit of spacing in between options for radio/checkbox questions (e.g. in consent forms) */
.form-check {
  margin-bottom: 0.375rem;
}

/* Range inputs aka sliders */
/* Thanks to https://range-input-css.netlify.app/ */
/** Baseline, reset styles **/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 25rem;
}
/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--bs-gray-400);
  border-radius: 0.5rem;
  height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  margin-top: -6px;
  /* Centers thumb on the track */
  background-color: var(--ect-theme-colour-dark);
  border-radius: 1rem;
  height: 1.25rem;
  width: 1.25rem;
}
input[type="range"]:focus::-webkit-slider-thumb {
  background-color: var(--ect-theme-colour-dark);
  outline: 3px solid var(--ect-theme-colour-dark);
  outline-offset: 0.125rem;
}
/** Firefox styles **/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: var(--bs-gray-400);
  border-radius: 0.5rem;
  height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
  background-color: var(--ect-theme-colour-dark);
  border: none;
  /*Removes extra border that FF applies*/
  border-radius: 1rem;
  height: 1.25rem;
  width: 1.25rem;
}
input[type="range"]:focus::-moz-range-thumb {
  background-color: var(--ect-theme-colour-dark);
  outline: 3px solid var(--ect-theme-colour-dark);
  outline-offset: 0.125rem;
}
/* The datalist element. Its child option elements can be clicked on to set the value of the input. */
.ect-range-input-labels {
  display: flex;
  justify-content: space-between;
}
.ect-range-input-labels option {
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  flex: 1 1 0;
  text-align: center;
}
.ect-range-input-labels option:hover {
  background-color: var(--bs-gray-200);
}

/* Add the word "Or" just before checkbox that says "None of the above" or "Neither" */
.form-check--none-of-the-above {
  position: relative;
  margin-top: 3rem !important;
}
.form-check--none-of-the-above::before {
  content: "Or";
  font-weight: bold;
  position: absolute;
  top: -2rem;
  left: 0;
}

/* Cards */
.ect-card {
  background-color: white;
  padding: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
}
/* For when you have to use a bootstrap card, e.g. when there's an image + card body
but you want the .ect-card border, border-radius and shadow. */
.card--ect-border-shadow {
  background-color: white;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
  border: none;
}
.card--ect-border-shadow .card-img-top {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

/* Navbar */

.ect-navbar {
  /* Make the navbar a fixed height for all font-sizes */
  height: 70px;
}
.navbar.ect-navbar {
  --bs-navbar-nav-link-padding-x: 0.8rem;
}
.navbar-brand {
  font-weight: 700;
}
.nav-link {
  color: rgb(230 230 230);
  font-size: 0.9rem;
}
.nav-link:hover {
  color: rgb(255 255 255);
}
.bg-dark {
  background-color: rgb(20 20 20) !important;
}
.navbar-toggler {
  color: white;
  line-height: 1.5;
}
#offer-finder-nav-link {
  background-color: var(--ect-theme-colour-dark);
  color: white;
  font-weight: 600;
  border-radius: 3px;
}

.ect-adv-client-banner {
  position: fixed;
  top: 63px;
  left: 0;
  right: 0;
  background-color: var(--ect-theme-colour-dark--darkest);
  color: white;
  font-size: 16px;
  z-index: 1;
}

.ect-message-banner {
  position: relative;
  top: 70px;
  left: 0;
  right: 0;
  background-color: var(--ect-theme-colour-dark--darkest);
  color: white;
  font-size: 20px;
  z-index: 1;
}

.ect-message-banner-text {
  margin-top: unset;
  margin-bottom: unset;
  text-align: center;
}

/* Tables */
.table {
  --bs-table-bg: rgba(0,0,0,0);
}

/* Containers */

/* The default containers are really wide, so make them smaller */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 960px;
  }
}

/* Glossary page */

#glossary-terms p {
  margin-bottom: 1.5rem;
}

/* Questionnaire */

/* Div containing input and label */
.ect-radio-group .form-check {
  padding: 0;
  position: relative;
}
.ect-radio-group .form-check + .form-check {
  margin-top: 0.75rem;
}
/* Radio or checkbox input */
.ect-radio-group .form-check-input {
  position: absolute;
  left: 1rem;
}
/* Label */
.ect-radio-group .form-check-label {
  width: 100%;
  padding: 1rem;
  padding-left: 3rem;
  border: 1px solid var(--bs-gray-500);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color ;
}
.ect-radio-group .form-check-label:hover {
  border-color: var(--bs-gray-800);
}
/* Display the radio/checkbox inside the label */
.ect-radio-group .form-check .form-check-input {
  position: absolute;
  left: 1rem;
  margin-left: 0;
  top: 1rem;
}
/* If checked, display border around the whole answer */
.ect-radio-group .form-check-input:checked + .form-check-label {
  border-color: var(--ect-theme-colour-dark);
  outline: 1px solid var(--ect-theme-colour-dark);
}

/* Question icon */
.ect-question-icon-container {
  width: 80px;
  height: 80px;
  padding: 20px;
  background-color: var(--ect-theme-colour-light);
  border-radius: 50px;
}
.ect-question-icon-container img {
  object-fit: contain;
  width: 40px;
  height: 40px;
}

.q-explanation-icon {
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  font-weight: bold;
  line-height: 30px;
  display: inline-block;
  background-color: var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* Progress bar */
.progress {
  border: 2px solid var(--bs-gray-800);
  background-color: white;
  --bs-progress-height: 0.75rem;
}
.progress-bar {
  background-color: var(--bs-gray-800);
  background-color: var(--ect-theme-colour-dark);
}

/* Star ratings for offer properties (carbon reduction potential etc.) */
.star-rating--static {
  cursor: default;
}
.star-rating__stars {
  color: var(--ect-theme-colour-dark);
  font-size: 30px;
  line-height: 0.5;
}

.star-rating--cost {
  color: var(--bs-gray-500);
  font-weight: bold;
  /* letter-spacing: -1px; */
  margin-right: 5px;
  color: var(--ect-theme-colour-dark--pale);
}
.star-rating--cost--0 span:nth-child(1) {
  color: var(--ect-theme-colour-dark);
  font-weight: bold;
}
.star-rating--cost--1 span:nth-child(1),
.star-rating--cost--1 span:nth-child(2) {
  color: var(--ect-theme-colour-dark);
  font-weight: bold;
}
.star-rating--cost--2 span:nth-child(1),
.star-rating--cost--2 span:nth-child(2),
.star-rating--cost--2 span:nth-child(3) {
  color: var(--ect-theme-colour-dark);
  font-weight: bold;
}
.star-rating--cost--3 span:nth-child(1),
.star-rating--cost--3 span:nth-child(2),
.star-rating--cost--3 span:nth-child(3),
.star-rating--cost--3 span:nth-child(4) {
  color: var(--ect-theme-colour-dark);
  font-weight: bold;
}
.star-rating--cost--4 span:nth-child(1),
.star-rating--cost--4 span:nth-child(2),
.star-rating--cost--4 span:nth-child(3),
.star-rating--cost--4 span:nth-child(4),
.star-rating--cost--4 span:nth-child(5) {
  color: var(--ect-theme-colour-dark);
  font-weight: bold;
}

/* Star rating radio input UI component */

.star-rating--input {
  display: block;
  cursor: default;
  position: relative;
}
/* This is the word "Small", "large" etc. which will appear to the right of the radios */
.star-rating--input label span {
 position: absolute;
 left: 116px;
 top: 3px;
 visibility: hidden;
 font-size: small;
 font-weight: bold;
}
.star-rating--input input[type="radio"]:checked + span {
  visibility: visible;
}
/* The radio input itself */
.star-rating--input__radio {
  cursor: pointer;
  transition: .2s;
  margin-left: 2px;
  margin-right: 2px;
}
.star-rating--input__radio:hover {
  box-shadow: var(--ect-input-focus-box-shadow);
}
.star-rating--input__radio--filled {
  background-color: var(--ect-theme-colour-dark);
  border-color: var(--ect-theme-colour-dark);
}
/* Remove white disc on inside of radio */
.star-rating--input__radio.form-check-input:checked[type=radio] {
  background-image: none;
}

/* Paginator */
.pagination {
  --bs-pagination-bg: transparent;
  --bs-pagination-active-bg: var(--ect-theme-colour-dark);
  --bs-pagination-border-width: 0;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-hover-bg: var(--bs-gray-300);
  --bs-pagination-focus-box-shadow: var(--ect-input-focus-box-shadow);
}

/* Answer summary page */

.ect-answer-summary-row {
  padding: 1rem 0;
}
.ect-answer-summary-row + .ect-answer-summary-row {
  border-top: 1px solid var(--bs-gray-400);
}
.ect-answer-summary-row__answer {
  font-weight: 600;
  color: var(--bs-gray-700);
  font-size: 0.875rem;
  line-height: 1.5rem;
}
@media (max-width:767px) {
  .ect-answer-summary-row__answer {
    margin-top: 0.5rem;
  }
}

/* Results page */

/* Bookmarking an offer to add it to report - checkbox which displays as bookmark icon */
input[type="checkbox"]:focus + .bookmark-offer-label {
  box-shadow: var(--ect-input-focus-box-shadow);
}
.bookmark-offer-icon--unselected, .bookmark-offer-icon--selected {
  width: 36px;
}
input[type="checkbox"]:checked + .bookmark-offer-label > .bookmark-offer-icon--unselected {
  display: none;
}
input[type="checkbox"] + .bookmark-offer-label > .bookmark-offer-icon--selected {
  display: none;
}
input[type="checkbox"]:checked + .bookmark-offer-label > .bookmark-offer-icon--selected {
  display: inline-block;
}

/* Expandable panel for showing the filters */
.offer-page-panel-collapse-button {
  width: 100%;
  background-color: transparent;
  color: black;
  border: none;
  outline: none;
  padding: 0;
  text-align: left;
  position: relative;
  text-decoration: underline;
}
.offer-page-panel-collapse-button:after {
  content: '';
  /* Down chevron */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6 -6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0 center;
  position: absolute;
  right: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  transition: rotate 0.3s;
}
.offer-page-panel-collapse-button[aria-expanded="true"]:after {
  /* Flip the chevron */
  rotate: 180deg;
}

.ect-seo-type-badge {
  padding: 0rem 0.4rem;
  font-weight: 600;
  font-size: small;
  border-radius: 50rem;
  background-color: rgba(0,0,0,0.1);
}

.offer-more-details-inner {
  background-color: white;
}

/* Bookmarked offers aka bespoke report page */
.ect-bookmarked-offer-recommendations-row {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.ect-bookmarked-offer-recommendations-row + .ect-bookmarked-offer-recommendations-row {
  border-top: 1px solid var(--bs-gray-400);
}
.ect-requirement-met {
  color: var(--bs-success);
}
.ect-requirement-met::before {
  color: var(--bs-success);
  /* Check icon */
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzE5ODc1NCIgY2xhc3M9ImJpIGJpLWNoZWNrLWNpcmNsZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAxNUE3IDcgMCAxIDEgOCAxYTcgNyAwIDAgMSAwIDE0bTAgMUE4IDggMCAxIDAgOCAwYTggOCAwIDAgMCAwIDE2Ii8+CiAgPHBhdGggZD0ibTEwLjk3IDQuOTctLjAyLjAyMi0zLjQ3MyA0LjQyNS0yLjA5My0yLjA5NGEuNzUuNzUgMCAwIDAtMS4wNiAxLjA2TDYuOTcgMTEuMDNhLjc1Ljc1IDAgMCAwIDEuMDc5LS4wMmwzLjk5Mi00Ljk5YS43NS43NSAwIDAgMC0xLjA3MS0xLjA1Ii8+Cjwvc3ZnPg==");
  position: relative;
  top: 3px;
}
.ect-requirement-not-met {
  color: var(--bs-danger);
}
.ect-requirement-not-met::before {
  color: var(--bs-danger);
  /* X icon */
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2RjMzU0NSIgY2xhc3M9ImJpIGJpLXgtY2lyY2xlIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDE1QTcgNyAwIDEgMSA4IDFhNyA3IDAgMCAxIDAgMTRtMCAxQTggOCAwIDEgMCA4IDBhOCA4IDAgMCAwIDAgMTYiLz4KICA8cGF0aCBkPSJNNC42NDYgNC42NDZhLjUuNSAwIDAgMSAuNzA4IDBMOCA3LjI5M2wyLjY0Ni0yLjY0N2EuNS41IDAgMCAxIC43MDguNzA4TDguNzA3IDhsMi42NDcgMi42NDZhLjUuNSAwIDAgMS0uNzA4LjcwOEw4IDguNzA3bC0yLjY0NiAyLjY0N2EuNS41IDAgMCAxLS43MDgtLjcwOEw3LjI5MyA4IDQuNjQ2IDUuMzU0YS41LjUgMCAwIDEgMC0uNzA4Ii8+Cjwvc3ZnPg==");
  position: relative;
  top: 3px;
}

.missing-reqmt-help-text::before {
  /* Lightbulb icon */
  content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1" /></svg>');
  margin-right: 10px;
  position: relative;
  top: 3px;
}

/* Form validation */
.required-q-star {
  color: var(--bs-danger);
  font-weight: bold;
}
.ect-validation-message {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
  padding: 1rem;
  border-left: 5px solid var(--bs-danger);
}
.ect-validation-input-message {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
  font-size: var(--ect-font-size-small);
  padding: 0.5rem;
  /* border-left: 5px solid var(--bs-danger); */
  position: relative;
}
.ect-validation-input-message:after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0px;
  width: 0;
  height: 0;
  border-bottom: 10px solid var(--bs-danger-bg-subtle);
  border-right: 10px solid transparent;
}


legend {
  font-size: 1rem;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1rem;
  }
}
/* Todo make more fields fieldsets with legend */

/* Report page print button + end session link */
.print-and-complete-container--fixed-top {
  position: fixed;
  top: 70px;
  background-color: white;
  left: 0;
  right: 0;
  z-index: 1;
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.15);
}
.html--beta-banner-top .print-and-complete-container--fixed-top {
  top: 133px;
}

/**
 * Print styles - for the report page.
 */
@media print {

  /* Use this to try to force page breaks */
  .page-break-after {
    clear: both;
    page-break-after: always;
  }

  html[data-bs-theme="dark"] {
    color: var(--bs-body-color);
  }

  /* Things we don't want to display in print version */
  .ect-navbar, footer, .breadcrumb, .beta-banner,
  .ect-adv-client-banner, #beta-banner-min-content {
    display: none;
  }

  /* Hide the cookie yes circle on printouts. display: none doesn't do it. */
  .cky-btn-revisit-wrapper {
    opacity: 0;
  }

  /* Make all the text smaller */
  :root {
    --ect-font-size-small: 13px;
    --ect-font-size-med: 15px;
    --ect-font-size-large: 21px;
  }

  /* Make all headers smaller */
  h1, .h1 {
    font-size: 1.75rem;
  }
  h2, .h2 {
    font-size: 1.5rem;
  }
  h3, .h3 {
    font-size: 1.25rem;
  }
  h4, .h4 {
    font-size: 1.15rem;
  }
  h5, .h5 {
    font-size: 1.1rem;
  }

  .ect-page-content-footer-container {
    padding-top: 0;
  }

  .container {
    max-width: 100% !important;
  }

  .ect-recommendation-panel.px-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .badge.rounded-pill {
    vertical-align: middle !important;
    color: black !important;
  }

  .star-rating__stars {
    color: var(--bs-body-color);
    font-size: 25px;
    line-height: 0.5;
  }

  #print-and-complete-container {
    display: none;
  }

  #print-and-complete-spacer {
    display: none;
  }
}

/* Article pages */

/* Big header thing at the top with background image */
.ect-bg-img-header {
  color: white;
  background-size: cover;
}
.ect-bg-img-header > div {
  min-height: 500px;
}
.ect-bg-img-header .breadcrumb-item, .ect-bg-img-header .breadcrumb-item a {
  color: white;
}
.ect-bg-img-header .breadcrumb-item+.breadcrumb-item::before {
  color: white;
}

.advice-page-image {
  height: 400px;
  background-size: cover;
}

#ect-bg-img-renewables1 {
  background-image: url('/u/img/iStock_16624445_brett_charlton_RESIZED.jpg');
  background-position-y: 25%;
}
#ect-bg-img-cse-logo-sign {
  background-image: url('/u/img/cse-office-sign.jpg');
  background-position-y: 60%;
}
#ect-bg-img-energy-monitoring {
  background-image: url('/u/img/iStock-1368017515_energy_meter_blurred_background_RESIZED.jpg');
  background-position-y: 50%;
}
#ect-bg-img-smart-meter {
  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0, 0, 0, 0.1)), url('/u/img/AdobeStock_629890538_Editorial_Use_Only_RESIZED.jpg');
  background-position-y: 50%;
}
#ect-bg-img-energy-bill {
  background-image: url('/u/img/AdobeStock_288776850_pylon_RESIZED.jpg');
  background-position-y: 100%;
}
#ect-bg-img-flex-graph {
  background-image: url('/u/img/AdobeStock_228722774_RESIZED.jpg');
  background-position-y: 100%;
}
#ect-bg-img-house-keys {
  background-image: url('/u/img/AdobeStock_503943228_RESIZED.jpg');
  background-position-y: 15%;
  background-position-x: 50%;
}
#ect-bg-img-walking-frame {
  background-image: url('/u/img/AdobeStock_488538729_RESIZED.jpg');
  background-position-y: 50%;
  background-position-x: 50%;
}
#ect-bg-img-laptop {
  background-image: url('/u/img/laptop.jpg');
  background-position-y: 50%;
}
#ect-bg-img-further-resources {
  background-image: url('/u/img/iStock-1395406581_RESIZED.jpg');
  background-position-y: 50%;
}
#ect-bg-img-piggy-bank {
  background-image: url('/u/img/iStock_87608369-woman-looks-at-tablet_RESIZED.jpg');
  background-position-y: 25%;
}
#ect-bg-img-next-steps {
  background-image: url('/u/img/AdobeStock_638800309_RESIZED.jpg');
  background-position-y: 25%;
}
#ect-bg-img-offer-page {
  background-image: url('/u/img/ect-all-offers-blur.png');
  background-position-y: 100%;
}
#ect-bg-img-advice-line {
  background-image: url('/u/img/AdobeStock_180704796_RESIZED.jpg');
  background-position-y: 50%;
}


.smart-energy-journey-breadcrumbs {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.smart-energy-journey-breadcrumbs li {
  flex-basis: 0;
  flex-grow: 1;
  font-size: 0.9rem;
  background-color: var(--bs-warning);
  color: black;
  padding: 1rem;
  margin-right: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  text-align: center;
}
.smart-energy-journey-breadcrumbs li:last-child {
  margin-right: 0px;
}
@media (max-width: 991px) {
  .smart-energy-journey-breadcrumbs {
    flex-direction: column;
  }
  .smart-energy-journey-breadcrumbs li {
    margin-right: 0px;
    margin-bottom: 4px;
    flex: row;
  }
  .smart-energy-journey-breadcrumbs li:last-child {
    margin-bottom: 0px;
  }
}

/* Landing page */

.offer-finder-hero {
  display: flex;
}
.offer-finder-hero__image {
  height: 0;
}
.offer-finder-hero__content {
  background-color: var(--bs-warning-bg-subtle);
  padding: 2rem 2.5rem;
}

@media (min-width: 992px) {
  .offer-finder-hero {
    background-color: var(--bs-warning-bg-subtle);
    position: relative;
  }
  .offer-finder-hero__image {
    background-image: url('/u/img/AdobeStock_494302441_RESIZED.jpg');
    background-size: cover;
    background-position-y: top;
    background-position-x: 50%;
    width: 50%;
    min-height: 700px;
  }
  .offer-finder-hero__content-container {
    width: 50%;
    display: flex;
    align-items: center;
  }
  .offer-finder-hero__content {
    padding: 2rem 3rem;
  }
}

/* Hero unit in dark mode */
html[data-bs-theme="dark"] .offer-finder-hero {
  background-color: black;
}
html[data-bs-theme="dark"] .offer-finder-hero__content {
  background-color: black;
}

/* Page footer */

.ect-page-footer__links {
 display: flex;
 flex-wrap: wrap;
 flex-basis: 168px;
}
.ect-page-footer__links a {
  text-decoration: none;
}
.ect-page-footer__links img {
 max-width: 190px;
 margin-right: 1rem;
}
.ect-page-footer__links__cse-col {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.ect-page-footer__links__funders-col {
  flex-grow: 1;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

/* Login page */

/* Spinner on the submit button - when you submit, the button gets disabled by JS.
Show the spinner when this happens */
#email-submit-button .spinner-border {
  display: none;
}
#email-submit-button:disabled .spinner-border {
  display: inline-block;
}

/* Personal info form */
.ect-personal-info-q-section + .ect-personal-info-q-section {
  margin-top: 1.5rem;
}

/* Beta banner */
.beta-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  padding: 1rem;
  background-color: var(--bs-primary-bg-subtle);
  height: 63px;
}

/* When displaying full banner, hide the minimized banner content */
.beta-banner #beta-banner-min-content {
  display: none;
}

.beta-banner-minimized {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  /* outline: 1px solid red; */
  background-color: black;
  color: white;
}

.beta-banner-minimized button {
  padding: 0.75rem 1rem;
  border: none;
  outline: none;
  color: white;
  background-color: transparent;
}
.beta-banner-minimized button:focus {
  box-shadow: var(--ect-input-focus-box-shadow);
}

/* When displaying minimized banner, hide the full banner content */
.beta-banner-minimized #beta-banner-full-content {
  display: none;
}

/* When beta banner is expanded it sits at the top */
/* So make some space for it */
.html--beta-banner-top .ect-page-content-footer-container {
  padding-top: 126px;
}
.html--beta-banner-top .ect-navbar {
  margin-top: 63px;
}

/* Narrow screens */
@media screen and (max-width: 600px) {
  /* Adjust the icons in the footer so they are smaller and on one line */
  .ect-page-footer__links img {
    max-width: 40%;
  }
  .ect-page-footer__links {
    flex-wrap: nowrap;
  }
  /* Reduce the height of the navbar as max text size is now lower */
  .ect-navbar {
    height: 51px;
  }
}