/* fonts and tokens of the Greenworking identity, shared with gpulse (src/client/app/variables.css) */
@font-face {
  font-family: "Calibri Light";
  src: url("../files/fonts/calibri_light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed SemiBold";
  src: url("../files/fonts/barlow_condensed_semibold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --gw-body-font-family: "Calibri Light", sans-serif;
  --gw-title-font-family: "Barlow Condensed SemiBold", sans-serif;
  /* both families ship a single weight: anything above it would be synthesized */
  --gw-font-weight-regular: 400;

  --gw-text-color: #000000;
  --gw-info-color: #7F7F7F;
  /* secondary ink that passes AA, --gw-info-color is reserved to hairlines */
  --gw-info-strong-color: color-mix(in oklab, var(--gw-text-color) 22%, var(--gw-info-color));
  --gw-neutral-color: #BFBFBF;
  --gw-control-background-color: #F3F3F3;
  --gw-track-color: #E7E3DD;
  --gw-positive-ink-color: #17613A;
  --gw-negative-ink-color: #8A2431;
  --gw-warning-ink-color: #7A5A00;
  --gw-warning-surface-color: #FFF3D6;
  --gw-error-ink-color: #9B1D23;
  --gw-error-surface-color: #FFE1E3;

  --gw-corner-radius: 3px;
  --gw-chip-corner-radius: calc(0.5 * 18px);
  --gw-card-corner-radius: calc(0.72 * 18px);
  --gw-box-corner-radius: 20px;
  --gw-pill-corner-radius: 999px;

  --gw-control-pressed-shadow: inset 0 2px 3px var(--gw-neutral-color);
  --gw-form-control-border-color: color-mix(in oklab, var(--gw-neutral-color) 62%, white);
  --gw-form-control-lift: 0 1px 2px color-mix(in srgb, var(--gw-text-color) 6%, transparent);
  --gw-panel-shadow: 0 2px 6px var(--gw-neutral-color);

  --bs-root-font-size: 18px;
  --bs-body-font-family: var(--gw-body-font-family);
}

/*
  fruity_twentythree restyles Bootstrap (fonts, sizes, colors, forms...): bring back the layout of the previous
  vanilla based theme (Bootstrap defaults and vanilla theme.css), gw rules follow
*/
:root {
  --bs-link-color: var(--gw-positive-ink-color);
  --bs-link-hover-color: var(--gw-text-color);
}
/* fruity sets a 100% height: the bottom margin kept for the fixed footer would not be scrollable */
html,
body {
  height: auto;
}
body {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.5;
  color: var(--gw-text-color);
  background-color: var(--gw-control-background-color);
  padding-bottom: 10px;
}
b, strong, th {
  font-weight: var(--gw-font-weight-regular);
}
.row,
.container-fluid {
  --bs-gutter-x: 20px;
}
#outerframeContainer,
.gw-survey-footer .container-fluid {
  min-height: 0;
  padding-left: 10px;
  padding-right: 10px;
}
#main-col {
  margin-bottom: 0;
}
a {
  color: var(--bs-link-color);
  text-decoration: underline;
}
a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}
h1, .h1,
#main-col h1.survey-name {
  font-family: var(--gw-title-font-family);
  font-size: 2.45rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.2;
  margin-bottom: 1rem;
  color: inherit;
}
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--gw-title-font-family);
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.2;
}
.text-info {
  color: var(--gw-info-strong-color) !important;
}
.text-danger {
  color: var(--gw-negative-ink-color) !important;
}
.alert {
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  border-radius: var(--gw-card-corner-radius);
}
.alert-dismissible {
  padding-right: 3rem;
}
.alert-warning {
  color: var(--gw-warning-ink-color);
  background-color: var(--gw-warning-surface-color);
}
.alert-danger {
  color: var(--gw-error-ink-color);
  background-color: var(--gw-error-surface-color);
}
.alert-warning .btn-close {
  width: 1em;
  height: 1em;
  font-size: 1rem;
  padding: 1.25rem 1rem;
}
.btn {
  min-height: 0;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.5;
  border-width: 1px;
  border-radius: var(--gw-corner-radius);
}
.btn-lg {
  min-height: 0;
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: var(--gw-pill-corner-radius);
}
.form-control {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gw-text-color);
  border-width: 1px;
}
.progress {
  font-size: .75rem;
  background-color: var(--gw-track-color);
  border-radius: var(--gw-pill-corner-radius);
}
.progress .progress-bar {
  line-height: 19px;
}
#survey-nav.navbar,
#survey-nav .navbar-collapse {
  background-color: var(--header-background-color) !important;
  box-shadow: none;
}
#survey-nav .navbar-brand {
  font-family: var(--gw-title-font-family);
  font-size: 1.55rem;
  line-height: 1.5;
  padding: .3125rem 0;
}
#survey-nav .navbar-nav .nav-link {
  padding: .5rem;
}
#survey-nav .dropdown-toggle::after {
  position: static;
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  font-family: inherit;
  font-size: inherit;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}
.group-container .group-title {
  font-family: var(--gw-title-font-family);
  font-size: 2rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.2;
  margin: 1em 0 1.5em;
  text-align: center;
  color: inherit;
}
.question-container {
  padding: 0;
  margin-bottom: 2em;
}
.question-container .question-title-container {
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 0;
}
.question-number {
  float: left;
  line-height: 1.5;
  color: var(--gw-info-strong-color) !important;
}
.question-container .ls-label-question {
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.35;
}
.question-container .question-help-container {
  margin-bottom: 0;
}
.ls-questionhelp {
  margin-bottom: 5px;
}
.question-container .question-valid-container {
  margin: 0;
}
.question-container .ls-question-message {
  font-style: normal;
  font-size: inherit;
}
.ls-answers {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
}
.ls-answers label,
.answer-item label,
.control-label {
  font-weight: var(--gw-font-weight-regular);
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
  margin-bottom: 0;
}
.form-control,
.form-select {
  border-color: var(--gw-form-control-border-color);
  border-radius: var(--gw-card-corner-radius);
  box-shadow: var(--gw-form-control-lift);
}
.form-select {
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-width: 1px;
}
.form-control:hover,
.form-select:hover {
  border-color: var(--gw-neutral-color);
}
/* no added ring: the border takes the brand color and the field sinks */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-color);
  box-shadow: var(--gw-control-pressed-shadow);
}
.ls-question-mandatory.text-danger,
.question-valid-container .text-danger {
  font-weight: var(--gw-font-weight-regular);
}
/* radio buttons and check boxes as drawn by vanilla (awesome-bootstrap-checkbox) */
.radio-item input[type="radio"]:checked + label,
.checkbox-item input[type="checkbox"]:checked + label {
  color: inherit;
}
.radio-item label::before,
.radio-item input[type="radio"]:checked + label::before {
  width: 17px;
  height: 17px;
  border: 1px solid var(--gw-neutral-color);
}
.radio-item label::after {
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
  margin-left: -20px;
  margin-top: 0;
}
.radio-item label.ls-label-xs-visibility::after {
  left: 4px;
}
.checkbox-item label {
  padding-left: 5px;
}
.checkbox-item label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
  width: 17px;
  height: 17px;
  border: 1px solid var(--gw-neutral-color);
  border-radius: var(--gw-corner-radius);
}
.checkbox-item input[type="checkbox"]:checked + label::after {
  width: 15px;
  height: 15px;
  left: 1px;
  top: 1px;
  border-radius: var(--gw-corner-radius);
  font-size: 13px;
  font-weight: normal;
  line-height: 15px;
  color: var(--brand-text-color);
  background-color: var(--brand-color);
}
.bootstrap-buttons-div label.btn {
  min-height: 0;
  padding: .375rem .75rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.5;
  border-width: 1px;
  border-radius: var(--gw-chip-corner-radius);
}
/* yes / no */
label.btn.btn-primary.answer-item {
  border-width: 1px;
  border-radius: var(--gw-chip-corner-radius);
}
/* ranking */
.select-sortable-lists:not(.ranking-advanced-style) .sortable-list {
  border: none;
  border-radius: var(--gw-card-corner-radius);
  background-color: var(--gw-control-background-color);
  padding: .3rem;
}
.select-sortable-lists:not(.ranking-advanced-style) .sortable-rank-subtitle {
  display: inline;
}
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
  background-color: transparent;
}
.select-sortable-lists:not(.ranking-advanced-style) .list-group-item,
.select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item,
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item {
  border: 1px solid var(--gw-form-control-border-color);
  margin-bottom: .3rem;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.5;
  color: inherit;
  background-color: var(--bs-body-bg);
  border-radius: var(--gw-chip-corner-radius);
  box-shadow: var(--gw-form-control-lift);
  cursor: grab;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.select-sortable-lists:not(.ranking-advanced-style) .list-group-item:hover {
  border-color: var(--gw-neutral-color);
}
/* the grip says the items can be moved */
.select-sortable-lists:not(.ranking-advanced-style) .selector__dragHandle.d-none {
  display: inline-flex !important;
  order: -1;
  float: none;
  color: var(--gw-info-color);
}
/* ranked items carry their rank, filled as a selection */
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-list {
  counter-reset: gw-rank;
}
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item::before {
  counter-increment: gw-rank;
  content: counter(gw-rank);
  order: -2;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .3rem;
  font-family: var(--gw-title-font-family);
  font-size: .95rem;
  line-height: 1;
  color: var(--brand-text-color);
  background-color: var(--brand-color);
  border-radius: var(--gw-pill-corner-radius);
}
@media (max-width: 575px) {
  .select-sortable-lists:not(.ranking-advanced-style) .answers-list.row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
    margin-top: 1rem;
  }
}
/* arrays: horizontal hairlines only, the hovered row turns grey to show the line being answered */
table.ls-answers > :not(caption) > * > * {
  border: none;
  border-bottom: 1px solid var(--gw-form-control-border-color);
}
table.ls-answers thead > tr > * {
  border-bottom-color: var(--gw-neutral-color);
}
table.ls-answers tbody tr {
  background-color: transparent;
}
@media (hover: hover) {
  table.ls-answers tbody tr:hover > * {
    --bs-table-accent-bg: transparent;
    background-color: var(--gw-control-background-color);
    color: var(--gw-text-color);
  }
}
table.ls-answers td.radio-item {
  padding: .5rem;
}
table.ls-answers th,
table.ls-answers .answer-text,
table.ls-answers .answertext {
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}
/* a structural weight is carried by the condensed family, never by a synthesized bold */
table.ls-answers .ls-heading th {
  font-family: var(--gw-title-font-family);
  font-size: 1.1rem;
  font-weight: var(--gw-font-weight-regular);
}
table.ls-answers tbody .answertext {
  font-weight: var(--gw-font-weight-regular);
  text-align: left;
  padding-left: 0;
}
/* small screens: each line becomes a block, its options a plain list */
@media (max-width: 767px) {
  .no-tables-mobile table.ls-answers > :not(caption) > * > * {
    border: none;
  }
  .no-tables-mobile table.ls-answers tbody tr {
    padding: .5rem 0;
    border-bottom: 1px solid var(--gw-form-control-border-color);
  }
  .no-tables-mobile table.ls-answers tbody tr:last-child {
    border-bottom: none;
  }
  .no-tables-mobile table.ls-answers tbody .answertext {
    padding: 0 0 .25rem;
  }
  .no-tables-mobile .ls-answers td.radio-item,
  .no-tables-mobile .ls-answers td.checkbox-item {
    padding: .5rem 0 .5rem 28px;
  }
}
.completed-wrapper .completed-heading,
.completed-wrapper .completed-Content {
  font-size: 1rem;
  font-weight: var(--gw-font-weight-regular);
  line-height: 1.5;
  margin-bottom: 1rem;
  color: inherit;
}
#main-col .survey-description {
  margin-bottom: 0;
}
.privacy {
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5;
}
@media only screen and (max-device-width: 760px) {
  h1,
  #main-col h1.survey-name,
  .group-container .group-title {
    font-size: 1.55rem;
  }
  .question-container {
    margin-bottom: 1em;
  }
  .question-container .question-title-container {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .ls-answers {
    padding-top: 0;
    padding-bottom: 0;
  }
  .ls-questionhelp {
    font-size: 90%;
  }
  .ls-answers > tbody > tr > td.radio-item,
  .ls-answers > tbody > tr > td.checkbox-item {
    min-height: 44px;
    padding-top: 10px;
    padding-left: 28px;
  }
}

#outerframeContainer {
  hyphens: none;
  overflow-wrap: break-word;
  margin-bottom: 6rem;
}

/* header */
#survey-nav {
  background-color: var(--header-background-color);
  border-bottom: none;
}
.nav-link {
  color: var(--header-text-color) !important;
}
/* survey name (or logo of the survey) and language, the optional tools menu unfolds below them */
.gw-survey-nav {
  width: 100%;
  min-height: 60px;
  padding: 0 1rem;
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.gw-survey-nav > .navbar-brand {
  grid-area: 1 / 2;
  margin: 0;
  color: var(--header-text-color) !important;
  display: flex;
  align-items: center;
  text-align: center;
  white-space: normal;
}
.gw-survey-nav-end {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.gw-survey-nav-end > .navbar-toggler {
  background-color: var(--header-text-color);
}
#navbar {
  grid-area: 2 / 1 / 3 / -1;
}
.gw-language-changer {
  flex-direction: row;
}
#survey-nav .gw-language-changer .nav-link {
  padding: .3rem .6rem;
  font-family: var(--gw-title-font-family);
  font-size: 1.15rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--gw-corner-radius);
}
#survey-nav .gw-language-changer .nav-link:hover,
#survey-nav .gw-language-changer .nav-link:focus-visible,
#survey-nav .gw-language-changer .nav-link[aria-expanded="true"] {
  background-color: color-mix(in srgb, var(--header-text-color) 16%, transparent);
  outline: none;
}
/* a white panel as in gpulse; the current language is the selected one: black ink on the grey */
.gw-language-changer .dropdown-menu {
  position: absolute;
  min-width: 10rem;
  padding: .3rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--gw-card-corner-radius);
  box-shadow: var(--gw-panel-shadow);
}
.gw-language-changer .dropdown-item {
  padding: .35rem .8rem;
  color: var(--gw-info-strong-color);
  text-decoration: none;
  border-radius: var(--gw-corner-radius);
}
.gw-language-changer .dropdown-item:hover,
.gw-language-changer .dropdown-item:focus-visible {
  color: var(--gw-text-color);
  background-color: transparent;
  text-decoration: underline;
  outline: none;
}
.gw-language-changer .dropdown-item.active {
  color: var(--gw-text-color);
  background-color: var(--gw-control-background-color);
}
@media (max-width: 767px) {
  .gw-survey-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 10px;
    gap: 0 .6rem;
  }
  #survey-nav .gw-survey-nav > .navbar-brand {
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1.15;
  }
}

/* welcome footer */
.gw-welcome-footer {
  background-color: var(--header-background-color);
  border-top: none;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--header-text-color);
}
.gw-welcome-footer > div {
  text-align: center;
}
.gw-welcome-footer a {
  color: var(--header-text-color);
}

/* survey footer */
.gw-survey-footer {
  background-color: var(--header-background-color);
  border-top: none;
  min-height: 3rem;
  display: grid;
  grid-template-columns: 50%;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 1rem;
  align-items: center;
}
.gw-navigator-button {
  padding: 0.5rem 0;
  place-self: center;
}
/* progress: a thin gauge as the gpulse rate gauges, its value next to it */
.gw-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.gw-progress .progress {
  flex: 1;
  height: .5rem;
  background-color: color-mix(in srgb, var(--header-text-color) 22%, transparent);
}
.gw-progress .progress-bar {
  background-color: var(--brand-color);
  border-radius: var(--gw-pill-corner-radius);
}
.gw-progress-value {
  min-width: 3em;
  font-family: var(--gw-title-font-family);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--header-text-color);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .gw-survey-footer {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    gap: 0 1rem;
    padding-top: .6rem;
  }
  .gw-survey-footer .gw-progress {
    grid-column: 1 / -1;
  }
  #outerframeContainer {
    margin-bottom: 8rem;
  }
}

/* content: a single white panel on the grey page, with the asymmetric corners of the gpulse panels */
.outerframe {
  max-width: 1080px;
  margin: 0 auto;
}
#outerframeContainer {
  margin-top: 2rem;
  padding: 1rem 2rem 2rem;
  background-color: var(--bs-body-bg);
  border-radius: 0 var(--gw-box-corner-radius);
  box-shadow: var(--gw-panel-shadow);
}
@media (max-width: 1120px) {
  body {
    background-color: var(--bs-body-bg);
  }
  #outerframeContainer {
    margin: 0 0 6rem;
    padding: 0 10px 1rem;
    border-radius: 0;
    box-shadow: none;
  }
}

/* welcome page */
.survey-welcome {
  margin: 2em 0;
}
.gw-start {
  text-align: center;
}

/* all question types: the number sits in its own column, everything else is indented on the question text */
.question-container {
  --gw-question-indent: calc(1.5rem + var(--bs-gutter-x));
  border: none;
  background: none;
}
.question-container .ls-label-question {
  font-size: 1.5rem;
}
.question-container .question-title-container:has(> .question-number) {
  display: grid;
  grid-template-columns: var(--gw-question-indent) minmax(0, 1fr);
  align-items: baseline;
}
.ls-question-mandatory {
  margin-left: var(--gw-question-indent);
}
.ls-softmandatory-input {
  margin-left: var(--gw-question-indent);
}
.question-number {
  float: none;
  font-family: var(--gw-title-font-family);
  font-size: 1.1rem;
  margin: 0;
}
/* a text display question is not one to answer: no number, its column is kept to stay aligned */
.question-container.boilerplate .question-number {
  visibility: hidden;
}
.question-container .answer-container {
  padding-left: calc(.5 * var(--bs-gutter-x) + var(--gw-question-indent));
  padding-right: calc(1.5 * var(--bs-gutter-x));
}
@media (max-width: 1080px) {
  .question-container .ls-label-question {
    font-size: 1.1rem;
  }
  .question-number {
    font-size: 0.8rem;
  }
}
@media (max-width: 767px) {
  .question-container {
    --gw-question-indent: 1.75rem;
  }
  .question-container .answer-container {
    padding-right: calc(.5 * var(--bs-gutter-x));
  }
}

/* question help */
.question-help-container {
  margin-left: var(--gw-question-indent);
}
.ls-questionhelp {
  margin-left: 0 !important;
  color: var(--gw-info-strong-color);
}
.ls-questionhelp:before {
  display: none;
}
/* LimeSurvey 7 adds text-info to question tips, which vanilla displays in bold */
.question-valid-container .ls-questionhelp.text-info {
  font-weight: var(--gw-font-weight-regular);
}
.question-container .ls-question-message {
  margin-left: var(--gw-question-indent);
  color: var(--gw-info-strong-color);
}

/* tables */
.table > :not(:first-child) {
  border-top: none;
}
.radio-item label::after {
  background-color: var(--brand-color) !important;
}
.radio-item input[type="radio"]:focus + label::before {
  outline: none;
}
.radio-item input[type="radio"]:focus-visible + label::before,
.checkbox-item input[type="checkbox"]:focus-visible + label::before {
  border-color: var(--brand-color);
  box-shadow: var(--gw-control-pressed-shadow);
}

/*
  buttons, as in gpulse: neutral like the fields at rest, a hover or a keyboard focus turns the control light grey
  and sinks it, only the selection takes the brand color
*/
.btn.btn-primary,
.bootstrap-buttons-div label.btn.btn-primary {
  background-color: var(--bs-body-bg);
  border-color: var(--gw-form-control-border-color);
  color: inherit;
  box-shadow: var(--gw-form-control-lift);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.bootstrap-buttons-div label.btn.btn-primary:hover,
.btn-check:focus-visible + label.btn.btn-primary {
  background-color: var(--gw-control-background-color);
  border-color: var(--gw-neutral-color);
  color: inherit;
  box-shadow: var(--gw-control-pressed-shadow);
}
.btn.btn-primary:active,
.btn-check:checked + label.btn.btn-primary,
.bootstrap-buttons-div .btn-check:active + label.btn.btn-primary,
.bootstrap-buttons-div label.btn.btn-primary:active,
.bootstrap-buttons-div label.btn.btn-primary.active {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--brand-text-color);
  box-shadow: none;
}
label::after {
  background-color: var(--brand-color);
}

/* navigation buttons: brand capsules like the gpulse calls to action, "previous" stays quiet */
.gw-start .btn.btn-lg.btn-primary,
.gw-navigator-button .btn.btn-lg.btn-primary {
  padding: .3rem 1.6rem;
  font-family: var(--gw-title-font-family);
  font-size: 1.4rem;
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--brand-text-color);
  box-shadow: none;
}
@media (max-width: 767px) {
  .gw-navigator-button .btn.btn-lg.btn-primary {
    font-size: 1.2rem;
    padding: .25rem 1.4rem;
  }
}
.gw-navigator-button .btn.btn-lg.btn-primary.ls-move-previous-btn {
  background-color: var(--gw-control-background-color);
  border-color: var(--gw-control-background-color);
  color: var(--gw-text-color);
}
.gw-start .btn.btn-lg.btn-primary:hover,
.gw-start .btn.btn-lg.btn-primary:focus-visible,
.gw-navigator-button .btn.btn-lg.btn-primary:hover,
.gw-navigator-button .btn.btn-lg.btn-primary:focus-visible {
  background-color: var(--gw-control-background-color);
  border-color: var(--gw-control-background-color);
  color: var(--gw-text-color);
  box-shadow: var(--gw-control-pressed-shadow);
}

/*
  horizontal scale: a row of numbered cells, the radio button covers its cell (clicked there) and its label, under
  the cells, gives the click a second target; end labels wrap under their cell and spread under their unlabelled
  neighbours only for a word wider than the cell.
  A list radio question with the "horizontal-scale" CSS class (the new editor does not list question themes) or,
  in surveys coming from the previous theme, with the horizontal-scale-20260429 question theme
*/
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) {
  --gw-scale-cell-height: calc(2 * .375rem + 1.5rem + 2px);
  /* columns an end label with a word wider than its cell may spread over */
  --gw-scale-end-label-span: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-columns: minmax(0, 1fr);
  padding-left: 0;
  margin: 0;
  counter-reset: scale;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item {
  position: relative;
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: subgrid;
  /* a wide end label overflows its column instead of widening it */
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  margin: 0 !important;
  counter-increment: scale;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item::before {
  grid-area: 1 / 1;
  pointer-events: none;
  content: counter(scale);
  text-align: center;
  padding: .375rem 0;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--bs-body-bg);
  border-top: 1px solid var(--gw-form-control-border-color);
  border-right: 1px solid var(--gw-form-control-border-color);
  border-bottom: 1px solid var(--gw-form-control-border-color);
  box-shadow: var(--gw-form-control-lift);
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(input[type="radio"]:hover)::before,
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(.radio-label:hover)::before,
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(input[type="radio"]:focus-visible)::before {
  background-color: var(--gw-control-background-color);
  box-shadow: var(--gw-control-pressed-shadow);
}
/* the selected cell also paints over the right border of the previous one */
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(input[type="radio"]:checked)::before {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--brand-text-color);
  box-shadow: -1px 0 0 var(--brand-color);
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:first-child::before {
  border-top-left-radius: var(--gw-chip-corner-radius);
  border-bottom-left-radius: var(--gw-chip-corner-radius);
  border-left: 1px solid var(--gw-form-control-border-color);
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:first-child:has(input[type="radio"]:checked)::before {
  border-left-color: var(--brand-color);
  box-shadow: none;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:last-child::before {
  border-top-right-radius: var(--gw-chip-corner-radius);
  border-bottom-right-radius: var(--gw-chip-corner-radius);
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: var(--gw-scale-cell-height);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .radio-label {
  grid-area: 2 / 1 / 3 / 2;
  text-align: center;
  cursor: pointer;
  padding: .5rem .25rem 0;
  user-select: none;
  border-left: none;
  color: var(--gw-info-strong-color);
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:first-child:has(+ .answer-item .radio-label-empty) .radio-label,
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(.radio-label-empty) + .answer-item:last-child .radio-label {
  position: relative;
  z-index: 1;
  /* wrapped under its cell, wider from the edge of the scale for a word wider than the cell */
  width: min-content;
  min-width: 100%;
  max-width: calc(var(--gw-scale-end-label-span) * 100%);
  text-wrap: balance;
  padding-left: 0;
  padding-right: 0;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list):has(> .answer-item:nth-child(7)) {
  --gw-scale-end-label-span: 3;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:first-child:has(+ .answer-item .radio-label-empty) .radio-label {
  justify-self: start;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .answer-item:has(.radio-label-empty) + .answer-item:last-child .radio-label {
  justify-self: end;
}
:is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .radio-label::before, :is(.horizontal-scale-20260429, .horizontal-scale .radio-list) .radio-label::after {
  display: none !important;
  content: none !important;
}