.preview_notice {
  display: none;
}


.navbar.primary-accent-bg,
.navbar.navbar-default.primary-accent-bg,
.primary-accent-bg {
  background-color: #032444;
}

.primary-accent-text {
  color: #032444;
}

.secondary-accent-bg {
  background-color: #93b6d9;
}

.secondary-accent-text {
  color: #93b6d9;
}

.navigation-current-bg {
  background-color: #e9eef5;
}

.navigation-current-text {
  color: #e9eef5;
}

.navigation-hover-bg {
  background-color: #e3d8e3;
}

.navigation-hover-text {
  color: #e3d8e3;
}

.no-vote-color-bg {
  background-color: #525252;
}

.no-vote-color-text {
  color: #525252;
}


a.ethelo-likert-button.btn.btn-raised.yes-color-bg,
a.ethelo-likert-button.btn.btn-raised.yes-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.yes-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.yes-color-bg:focus,
.yes-color-bg {
  background-color: #113353;
}

.yes-color-text {
  color: #113353;
}


a.ethelo-likert-button.btn.btn-raised.no-color-bg,
a.ethelo-likert-button.btn.btn-raised.no-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.no-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.no-color-bg:focus,
.no-color-bg {
  background-color: #85a7ca;
}

.no-color-text {
  color: #85a7ca;
}


a.ethelo-likert-button.btn.btn-raised.bin1-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin1-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin1-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin1-color-bg:focus,
.bin1-color-bg {
  background-color: #85a7ca;
}

.bin1-color-text {
  color: #85a7ca;
}

a.ethelo-likert-button.btn.btn-raised.bin2-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin2-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin2-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin2-color-bg:focus,
.bin2-color-bg {
  background-color: #7699bb;
}

.bin2-color-text {
  color: #7699bb;
}

a.ethelo-likert-button.btn.btn-raised.bin3-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin3-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin3-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin3-color-bg:focus,
.bin3-color-bg {
  background-color: #688aac;
}

.bin3-color-text {
  color: #688aac;
}

a.ethelo-likert-button.btn.btn-raised.bin4-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin4-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin4-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin4-color-bg:focus,
.bin4-color-bg {
  background-color: #597c9d;
}

.bin4-color-text {
  color: #597c9d;
}

a.ethelo-likert-button.btn.btn-raised.bin5-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin5-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin5-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin5-color-bg:focus,
.bin5-color-bg {
  background-color: #4b6d8f;
}

.bin5-color-text {
  color: #4b6d8f;
}

a.ethelo-likert-button.btn.btn-raised.bin6-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin6-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin6-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin6-color-bg:focus,
.bin6-color-bg {
  background-color: #3d5e80;
}

.bin6-color-text {
  color: #3d5e80;
}

a.ethelo-likert-button.btn.btn-raised.bin7-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin7-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin7-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin7-color-bg:focus,
.bin7-color-bg {
  background-color: #2e5071;
}

.bin7-color-text {
  color: #2e5071;
}

a.ethelo-likert-button.btn.btn-raised.bin8-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin8-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin8-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin8-color-bg:focus,
.bin8-color-bg {
  background-color: #204162;
}

.bin8-color-text {
  color: #204162;
}

a.ethelo-likert-button.btn.btn-raised.bin9-color-bg,
a.ethelo-likert-button.btn.btn-raised.bin9-color-bg:hover,
a.ethelo-likert-button.btn.btn-raised.bin9-color-bg:active,
a.ethelo-likert-button.btn.btn-raised.bin9-color-bg:focus,
.bin9-color-bg {
  background-color: #113353;
}

.bin9-color-text {
  color: #113353;
}

body, body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4 {
  font-family: Open Sans, sans-serif
}

.side-drawer-header {
  background-color: #032444;
}

h1.main {
  color: #032444;
}

.navbar-user-dropdown {
  background-color: #032444
}

.nav-item.active {
  background-color: #e9eef5;
}

#index-parent:hover,
.nav-item-container:not(.active) .nav-item:not(.disabled):hover,
.nav-item-container:not(.active) .nav-item:not(.disabled):hover,
.nav-item-container:not(.active) .nav-item:not(.disabled):hover {
  background-color: #e3d8e3;
}

.nav-item.disabled .disabled {
  color: #A0A0A0;
}

.nav-item-container .nav-item-container:not(.active):hover {
  background-color: #e3d8e3;
}

.btn.btn-raised.btn-default.btn-post,
.btn.btn-raised.btn-default.btn-post:hover,
.btn.btn-raised.btn-default.btn-post:focus,
.btn.btn-raised.btn-default.btn-post:active,
.btn.btn-raised.btn-default.navigation-button,
.btn.btn-raised.btn-default.navigation-button:hover,
.btn.btn-raised.btn-default.navigation-button:focus,
.btn.btn-raised.btn-default.navigation-button:active {
  background-color: #032444;
  color: white;
}

.option-detail-container {
  background-color: #032444;
}

.moderate .filters .active {
  background-color: #032444;
  color: white;
}

.moderate .filters {
  color: #032444;
  background-color: white;
}



.page-results-group .show-default-view,
.results-summary-page .show-default-view,
.page-results-group .hide-default-view,
.results-summary-page .hide-default-view {
  background-color: #ffffff !important;
  border: 4px solid #247e00;
  margin: 0 16px;
}

.scenario-panel.panel-heading::before {
  content: "Live community results" !important;
  color: #ffffff;
  font-family: "Noto Sans", system-ui, sans-serif !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 150%;
  letter-spacing: -0.015em;
  display: block;
  width: 65%;
  padding-left: 0px;
}

.panel-default>.panel-heading+.panel-collapse>.panel-body {
  border-top-color: transparent;
}

.page-results-group .panel-heading h3,
.page-results-group .show-default-view h3,
.results-summary-page .show-default-view h3 {
  display: none;
  color: #ffffff;
}

/* .panel.panel-default > .panel-heading, .panel > .panel-heading {
  margin-bottom: 0px;
}
 */

.page-results-group .panel.panel-default > .panel-heading,
.results-summary-page .panel.panel-default > .panel-heading {
  background-color: #247e00;
  color: #ffffff;
}

.page-results-group .right-sidebar__bottom.panel-group .panel.panel-default > .panel-heading,
.results-summary-page .right-sidebar__bottom.panel-group .panel.panel-default > .panel-heading {
  background-color: #fff;
  color: #000000;
}

.card.result-card .detail-toggle .labels .label i.expand_less {
    color: #ffffff !important;
}

.results-summary-page .card.result-card .detail-toggle .labels .label i.expand-more {
    color: #000000 !important;
}

.page-results-group .content-col .panel-body:last-child {
  padding: 16px 16px 16px 16px;
}

.page-results-group.content-col .panel-body:last-child {
  padding: 0px 16px !important;
}
.scenario-panel-default::before,
.scenario-panel::before {
  padding-left: 24px;
  content: "The following were the top 12 options";
}

.points-container {
  padding: 0 16px;
}

.tab-content-metrics .format {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #247e00;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  content: "";
}

.card.result-card .detail-toggle.collapsed {
  background-color: #ffffff !important;
  border-bottom: 2px solid #000000;
  border-top: 2px solid #000000;
}

.card.result-card .detail-toggle {
    margin-top: 0;
    margin-bottom: -2px !important;
}

.tab-content-metrics .format-ethelo:before {
  content: "";
  color: #247e00;
}

.scenario-navigator-container {
  padding: 0;
}
.page-results-group .card.flat {
  background-color: #ffffff !important;
}

.page-results-group .card.flat .card-body {
  padding-left: 0px !important;
}

.card.result-card .detail-toggle .title {
  font-weight: 800;
  font-size: 24px;
  line-height: 18px;
}

.card.result-card .detail-toggle[aria-expanded="true"] .labels .label {
  color: #ffffff !important;
}

.card.result-card .detail-toggl[aria-expanded="true"] .labels .label i {
  color: #ffffff !important;
}

.page-results-group .panel-heading .panel-heading-right span,
.results-summary-page .panel-heading .panel-heading-right span {
  color: #ffffff !important;
}

.page-results-group .accordion-toggle .circle-toggle-close,
.page-results-group .accordion-toggle .circle-toggle-open {
  border: 2px solid #ffffff !important;
}

.results-summary-page .accordion-toggle .circle-toggle-close i.material-icons,
.results-summary-page .accordion-toggle .circle-toggle-open i.material-icons,
.page-results-group .accordion-toggle .circle-toggle-close i.material-icons,
.page-results-group .accordion-toggle .circle-toggle-open i.material-icons {
  color: #ffffff !important;
}

.person.bin1-color-text {
  color: #247e00;
}
.person.bin2-color-text {
  color: #247e00;
}
.person.bin3-color-text {
  color: #247e00;
}
.person.bin4-color-text {
  color: #247e00;
}
.person.bin5-color-text {
  color: #247e00;
}
.person.bin6-color-text {
  color: #247e00;
}
.person.bin7-color-text {
  color: #247e00;
}
.person.bin8-color-text {
  color: #247e00;
}
.person.bin9-color-text {
  color: #247e00;
}
.person.bin9-color-text {
  color: #247e00;
}
.person.bin10-color-text {
  color: #247e00;
}
.person.bin11-color-text {
  color: #247e00;
}
.person.bin12-color-text {
  color: #247e00;
}
.person.bin13-color-text {
  color: #247e00;
}

.page-results-group .votes,
.results-summary-page .votes,
.page-results-group .votes-header,
.results-summary-page .votes-header {
  background-color: #fff;
  align-items: start;
  padding: 8px 16px 8px 16px;
  color: #000000;
}

.distribution-captions .distribution-caption {
  background-color: #247e00;
  font-size: 14px;
}

.page-results-summary .votes-header .text-block a i,
.page-results-summary .votes-header .text-block a span,
.page-results-group .votes-header .text-block a i,
.page-results-group .votes-header .text-block a,
.page-results-group .votes-header .text-block a span {
  color: #000000;
}

.support-distribution {
  background-color: #fff;
  border-radius: 0;
  margin: 0;
  padding: 0px;
  width: 100%;
}

.card.flat .card-body {
  padding: 0px !important;
  background-color: #ffffff;
}

.histogram-people-container {
  padding: 0 16px;
}

.likert-block.filled {
  background-color: #247e00 !important;
}

.tab-content-metrics .format-support:hover::before,
.tab-content-metrics .format-support:before {
  content: "";
  color: #247e00 !important;
}

.likert {
  border: 3px solid #247e00 !important;
}

.histogram-bar-chart rect.highcharts-color-0 {
  fill: #247e00 !important;
}

.card-header [aria-expanded="true"] {
  background-color: #247e00 !important;
  color: #ffffff;
}

.card.result-card .detail-toggle[aria-expanded="true"] .title {
  color: #fff;
}

.card.flat .card-body .nav-pills > li.active > a {
  border-bottom: 6px solid #247e00;
  background-color: transparent;
  color: #000 !important;
  font-weight: 800 !important;
}

.card.flat .card-body .nav {
  border-bottom: 3px solid #000000;
  margin: 0 16px;
}

.card.flat .card-body .nav-pills > li.active > a {
  color: #000000;
}
.result-info p {
  color: #000000;
}

.nav-pills {
}
.card.flat .card-body .result-info p {
  color: #000000 !important;
}
.tab-content-metrics .table-details .units,
.tab-content-metrics table tbody tr td.name,
.tab-content-metrics .hint {
  color: #000000 !important;
}
.tab-content-metrics .hint {
  background-color: #f7f7f7;
}

.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-american-indian-or-alaska-native-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-asian-first-level-category-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-black-or-african-american-first-level-category-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-hispanic-or-latino-first-level-category-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-middle-eastern-or-north-african-first-level-category-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-native-hawaiian-or-pacific-islander-first-level-category-input-label"]
  label,
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-white-first-level-category-input-label"]
  label {
  font-weight: 800 !important;
}

.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-asian-input-label"],
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-black-or-african-american-input-label"],
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-hispanic-or-latino-input-label"],
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-middle-eastern-or-north-african-input-label"],
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-native-hawaiian-or-pacific-islander-input-label"],
.form-group
  .checkbox[aria-labelledby="q-demographics-race-and-or-ethnicity-white-input-label"] {
  margin-left: 64px;
}

/* .scenario-navigator-item-center .ember-view,
/* .scenario-navigator-item {
/*   display: none !important;
/* }

.navigation-group a[data-toggle="collapse"] {
  font-style: italic;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.list-group-item > .ember-view .list-group-item {
  padding-left: 24px;
}

#participant-results h2,
#participant-results h3 {
  padding: 32px 8px 8px 8px;
}

#participant-results.panel-body p {
  padding: 16px;
  font-size: 18px;
}

#participant-results .option {
    padding: 3px 16px;
    font-size: 14px;
    background-color: #FFF;
}
.participant-results-option a,
.participant-results-option span {
    color: #000000 !important;
}

#participant-results .option {
  font-size: 16px !important;
  font-family: "Noto Sans", sans-serif !important;
}

.right-sidebar__bottom.panel-group .h4 .float-left, 
.right-sidebar__bottom.panel-group h4 .float-left {
  font-weight: 800 !important;
  font-size: 18px !important;
  
}


#center-col .panel body p a,
#center-col .panel body ul li a {
  font-weight: 400;
  color: #0077c8 !important;
}

a {
  color: #0077c8;
}

/** hide auto balance button and popup */
#balance-button {
  display: none;
}
#balance-link {
  display: none;
}
/* swaps surplus and deficit colors on first balance bar 
Change #balance-bar to #balance-bar2 for second balance bar 
*/

#balance-bar.surplus-slider .surplus,
#balance-bar.surplus-slider .deficit {
  background-color: #247e00;
}

#balance-bar.surplus-slider .top .tooltip-arrow {
  border-top-color: #b30057;
}

#balance-bar.surplus-slider .balanced {
  background-color: #ff66a6;
}

#balance-bar.surplus-slider .slider .slider-handle:not(.primary-accent-bg) {
  background-color: #b30057;
  border-color: #b30057;
}

#balance-bar.surplus-slider .tooltip-inner {
  background-color: #b30057;
}

#balance-bar.deficit-slider .surplus,
#balance-bar.deficit-slider .deficit {
  background-color: #0077c8;
}

#balance-bar.deficit-slider .top .tooltip-arrow {
  border-top-color: #005a96;
}

#balance-bar.deficit-slider .balanced {
  background-color: #4aa6e6;
}

#balance-bar.deficit-slider .slider .slider-handle:not(.primary-accent-bg) {
  background-color: #005a96;
  border-color: #005a96;
}

#balance-bar.deficit-slider .tooltip-inner {
  background-color: #005a96;
}

/* Temporary patches */
/* Padding  fix */
.new-comment .instruct {
  padding-bottom: 40px;
}

/* Engaged CA stylesheet */

/* Instance specific CSS */
.panel-body.signin-form::before,
.invited-panel .panel-body::before {
  /* content: "You have been invited to LA Fires Recovery Phase 2" !important; */
}

.main {
  padding: 8px;
}

/* Demo mode UX improvements - Hide comment input box  */
.new-comment .form-comment-container-outer {
  /* display: none !important; */
}

/* New styles to organize into rest of stylesheet */
.nav-item-container.list-group-item ul.list-group .nav-item-container a {
  /* padding-left: 40px !important; */
}

.prompt {
  font-size: 2rem;
}

.prompt-box {
  background-color: #fff4cc;
  margin: 20px 0px;
  padding: 40px;
  border-radius: 20px;
}

span.bigger-emoji {
  font-size: 4.4rem;
}

.drawer-toggle {
  color: #000000;
}

.drawer-toggle:hover {
  color: #000000;
}

/* remove client feedback button */
a.client-feedback {
  /* display: none; */
}


.navbar-brand img.custom-logo.visible-xs-inline {
  max-height: 50px;
}

.visible-xs.visible-sm.navbar-brand.decision-title {
  margin-top: 10px;
}

.comment-section-btns.btn-xs {
  margin-left: 32px;
}

.form-group .help-block {
  position: relative;
}

/*--- Sign in form ----*/

.signin-form p {
  font-weight: 700;
  font-size: 2.2rem !important;
}

#auth-modal-label {
  display: none;
}

/* Comment title styling  */

.instruct p {
  font-weight: 700;
  font-size: 2rem !important;
}

/*---- Account ----*/
#edit-profile .form-group:has([name="username"]) {
  display: none;
}

#edit-profile .form-group:has([name="username"]) input {
  opacity: 0.3;
}

/* -- User profile menu ----*/
li.navbar-user-dropdown {
  display: none !important;
}

/*---- Invited panel ----*/
.invited-panel .panel-body p {
  display: none;
}

.panel-body.signin-form::before,
.invited-panel .panel-body::before {
  font-weight: 700;
  font-size: 2.2rem !important;
  /* padding-bottom: 60px; */
}

.panel-body.signin-form p:first-child,
.invited-panel .panel-footer {
  display: none;
}

/*---- Typography ----*/

/*---- Spacing and Layout ----*/
p + p,
.comment-item-container + .comment-item-container,
.ethelo-likert-group,
.form-group.row {
  margin-top: 1.5em;
}

.comment-replies {
  padding-left: 20px;
}

.hide-comments {
  right: 0;
}

.page-voting-option-category .likert-container {
  padding: 16px 40px;
}

.page-voting-option-category .likert-container .ember-view {
  padding-bottom: 0px;
}

.comment-item-container .row-content .list-group-item-text {
  margin-top: 0.25em;
  margin-bottom: 0;
}

.form-group .pull-right {
  float: none !important;
}

hr.fancy {
  border: 0;
  margin: 40px 0 0 0 !important;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  );
}

/*---- Other ----*/
li.navbar-user-dropdown {
  display: block;
}

li.navbar-user-dropdown span[aria-label="User Menu"] {
  color: #000000;
}

li.navbar-user-dropdown span[aria-label="User Menu"]:hover {
  color: #000000;
}



.sign-checkbox .info label {
  display: none;
  padding-bottom: 100px;
}

#signup-page-text p img {
  content: url("https://engaged.ca.gov/public/images/header-logo.svg");
}

.untabbed-modal-panel .checkbox.bottom-0 label {
  display: none;
}

.list-group-item.comment-item-container .comment-item .user-name {
  display: none;
}

.signon {
  margin: 40px;
}

.untabbed-modal-panel .panel-body p {
  margin-top: 16px;
  font-size: 120%;
  font-weight: 700;
  line-height: 1.275;
}

.untabbed-modal-panel .panel-body label.info {
  font-size: 120%;
  line-height: 1.275;
}

.untabbed-modal-panel .panel-footer {
  font-size: 120%;
  line-height: 1.275;
}

.untabbed-modal-panel .panel-body label.info a {
  font-size: inherit;
  line-height: 1.275;
  color: #247e00;
  text-decoration: underline;
}

strong#auth-modal-label {
  font-size: 170%;
  letter-spacing: -0.015em;
  font-family: "Noto Sans", sans-serif;
  font-weight: 800;
  line-height: 120%;
}

.form-group.has-error .help-block,
.form-group.has-error label.control-label {
  color: #842029;           /* dark red, readable */
  position: relative;
  margin-top: 16px;
}


.reset-password-panel .form-group.has-error .help-block,
.reset-password-panel .form-group.has-error label.control-label  {
  color: #000000;
  position: relative;
  margin-top: 16px;
}


/* Match fonts colors default to engaged.ca.gov */
body
  *:not(
    .h4.panel-slider__title > .float-left,
    .material-icons-outlined,
    .material-icons,
    .person,
    .icon
  ) {
  font-family: "Noto Sans", system-ui, sans-serif !important;
}

h1,
h2,
h3,
.h4.panel-slider__title > .float-left,
.display-text {
  letter-spacing: -0.015em;
  font-family: "Noto Sans", sans-serif;
  font-weight: 800;
  line-height: 150%;
}

.navbar .navbar-brand {
  color: #000000;
  height: 80px;
  line-height: 47px;
}

.nav-item.active {
  background-color: #f0f079;
}

.list-group-item .material-icons-outlined.half-complete {
  color: #6c757d;
}
.panel-slider__title {
  font-size: 2.4rem;
}

#page-header {
  width: 100%;
  text-align: left;
  margin: 0px;
  vertical-align: middle;
  padding-bottom: 0px;
  padding-left: 8px;
}

b,
strong {
  font-weight: 1500;
}

body {
  background-color: #f7f7f7;
}

/* Change navbar background */
.navbar.primary-accent-bg,
.navbar.navbar-default.primary-accent-bg {
  background-color: #ffffff;
}

/* Change navbar title color */
.navbar .navbar-nav > li.decision-title,
.navbar .navbar-nav > li > a {
  color: #000;
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: -0.264px;
}

/* Match navbar background color for user dropdown */
.navbar-user-dropdown {
  background-color: #ffffff;
}

/* Adjust required style */
.required {
  font-style: normal;
  text-decoration: none;
  color: #fd7e14;
  float: left !important;
  margin-right: 8px;
  margin-top: 0.9rem;
  display: inline-block;
}

.control-label .required {
  margin-top: 0rem;
}

.required + h2 {
  display: flex;
  float: none !important;
  margin-bottom: 16px;
}

/* Fix responsive navbar */

.navbar .navbar-brand,
.custom-logo {
  height: auto;
  padding: 0 15px 10px 15px;
  line-height: 2.5em;
}

.h1,
h1 {
  font-size: 3.2rem;
}

.h2,
h2 {
  font-size: 2.3rem;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
}

h3 {
  font-size: 18px;
}

.navbar .navbar-brand,
.custom-logo {
  padding: 0px;
}

.navbar-brand {
  color: #000;
  font-family: "Noto Sans";
  /* font-size: 1.2rem; */
  font-style: normal;
  font-weight: 500;
  line-height: 126%; /* 22.68px */
  letter-spacing: -0.198px;
  display: block;
}
.navbar .navbar-nav > li.decision-title,
.navbar-brand.decision-title {
  margin-right: 40px;
  white-space: initial;
  overflow: visible;
  text-overflow: initial;
  line-height: 1.25rem;
  margin-top: 20px;
  margin-left: 15px;
  padding: 10px;
}

@media only screen and (max-width: 992px) {
  .navbar-brand {
    font-size: 1.4rem;
  }

  .navbar-brand {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 126%; /* 22.68px */
    letter-spacing: -0.198px;
    display: block;
  }
  .navbar .navbar-nav > li.decision-title,
  .navbar-brand.decision-title {
    margin-right: 40px;
    white-space: initial;
    overflow: auto;
    text-overflow: initial;
    line-height: 1.25rem;
    margin-top: 20px;
    padding: 10px;
  }
}

/* Form overrides */
.qcheckbox p {
  font-size: 23px;
  /* font-weight: 700; */
  line-height: 1.275;
}

.radio .circle,
label.radio-inline .circle,
.radio .check,
label.radio-inline .check {
  height: 23px;
  width: 23px;
}

/* Slider style overrides */
.qlabeled_slider .control-label p {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.275;
}

.qlabeled_slider .control-label .required {
  line-height: 1.275;
  margin-bottom: 16px;
}

.form-control.survey-labeled-slider {
  margin-top: 32px;
}

.qlabeled_slider.row {
  margin-bottom: 48px;
}

.labeled-slider .slider .tooltip-inner::before,
.range-slider .slider .tooltip-inner::before,
.survey-slider .slider .tooltip-inner::before,
.weighting-slider .slider .tooltip-inner::before {
  content: "Use slider to vote";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  color: #000000;
  background: #fff4cc;
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  max-width: none;
  text-align: center;
  line-height: 19px;
  left: 0;
  top: 0;
  padding: 0 5px;
}

/* Make it easier to see the modal close button */
button.close i.material-icons {
  color: #000000;
}

button.close {
  opacity: 1;
}

/*-- Buttons --*/
.btn.btn-raised.btn-primary,
.btn.btn-raised.btn-danger,
.btn.navigation-button,
.btn.ethelo-likert-group-mobile {
  background-color: #247e00 !important;
  color: #000000;
  text-transform: lowercase;
  font-size: 1.65rem;
  border-radius: 0.625rem;
  padding: 0.5em 2.5em;
  letter-spacing: -0.015em;
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  border: 2px solid transparent;
  transition: none;
}

.btn.btn-raised.btn-danger {
  background-color: #fff !important;
  color: #000000;
  border: 2px solid #d24532;
}

.btn.btn-raised.btn-primary:hover,
.btn.btn-raised.btn-primary:active {
  background-color: #247e00;
}

.btn.btn-raised.btn-danger::first-letter,
.btn.btn-raised.btn-primary::first-letter,
.btn.navigation-button::first-letter,
.btn.ethelo-likert-group-mobile::first-letter {
  text-transform: uppercase !important;
}

.bottom-nav-buttons > .row .btn.navigation-button:not([aria-disabled="true"]),
.btn.ethelo-likert-group-mobile {
  border-radius: 0.625rem;
  border: 2px solid #247e00;
}

.bottom-nav-buttons > .row > div:first-child .btn.navigation-button {
  background: #fff !important;
  color: #000;
}

.bottom-nav-buttons .btn.navigation-button:focus,
.btn.ethelo-likert-group-mobile:focus {
  border: 2px solid #247e00 !important;
  outline: 1px solid #000 !important;
}

.bottom-nav-buttons > .row .btn.navigation-button[aria-label="NEXT"] {
  background-color: #247e00;
  color: #FFFFFF;
  font-weight: 700;
}

.btn.navigation-button[aria-disabled="true"] {
  border: 2px solid #ddd;
  background-color: #f2f2f2 !important;
  color: rgba(148, 152, 155, 0.85) !important;
}

button.btn:focus,
button.btn.btn-raised.navigation-button.btn-primary:focus {
  border: inherit !important;
}

.bottom-nav-buttons > .row .navigation-button:hover {
  background-color: inherit;
}

.container-fluid.bottom-nav-buttons {
  display: flex;
  flex-direction: row;
  padding-left: 0;
}

/* Remove all padding */
.container-fluid.bottom-nav-buttons div[class*=" col-"] {
  margin: 0;
  padding: 0;
}

.container-fluid.bottom-nav-buttons
  div[class*=" col-"]
  .ember-view
  .navigation-button {
  margin: 0 16px 0 0px;
  padding: 8px 32px;
}

@media only screen and (max-width: 768px) {
  .container-fluid.bottom-nav-buttons
    div[class*=" col-"]
    .ember-view
    .navigation-button:not([aria-label="BACK"]) {
    margin: 0 0px 0 16px;
    padding: 8px 32px;
  }
  .container-fluid.bottom-nav-buttons
    div[class*=" col-"]
    .ember-view
    .navigation-button[aria-label="NEXT"] {
    margin: 0 0px 0 16px;
    padding: 8px 32px;
  }
}

/*---- Collapse / Toggle styles ----*/

.panel.panel-default > .panel-heading,
.panel > .panel-heading {
  background-color: transparent;
  border-bottom: 1px solid #666666;
  margin-bottom: 16px;
}

.expansion-toggle.primary-accent-bg {
  background-color: #247e00;
  color: #fff !important;
  font-size: 2rem;
  font-weight: bold;
}

.expansion-toggle:focus {
  outline: 2px solid currentColor;
  outline-offset: -0.25em;
}

.container-fluid.bottom-nav-buttons {
  display: flex;
  flex-direction: row;
  padding-left: 0;
}

/* Fix page padding */
.main {
  /*  padding: 8px; */
}

.prompt-box a,
.panel.body a {
  color: #000000;
  font-style: normal;
  font-weight: 700;
}

/* Favorite icon */
i.material-icons.favorite {
  color: #f0f079;
}

/* Remove box shadows */
.survey-page textarea.ember-text-area.form-control {
  box-shadow: none;
  background-color: #fff;
}

/* Improve appearance of drop shadows */
.btn.btn-raised:not(.btn-link) {
  box-shadow: none;
}

.dropdown .comment-privacy-select .open {
  box-shadow: none;
}
/*---- Panels ----*/

div[class*="-column"] .panel {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}

[role="main"] .panel {
  background: transparent;
  box-shadow: none;
}

/*---- Input text and textarea ----*/

.form-control,
.form-group .form-control {
  border: 2px solid #d9d9d9;
  border-radius: 0.25em;
  background-image: none;
  padding: 0.5em;
  height: auto;
  background-color: #fff;
}

/* fix radio button / checkbox hover effect on textboxes and textareas */
.form-group.qradio.is-focused input[type="text"],
.form-group.qradio.is-focused textarea,
.form-group.qcheckbox.is-focused input[type="text"],
.form-group.qcheckbox.is-focused textarea {
  background-image: none;
}

.radio span,
label.radio-inline span {
  top: 6px !important;
}

.page-survey-page .panel-body + div.form-group {
  padding: 2em;
  background-color: #ffffff;
}

div:has(> .form-group) + div {
  margin-top: 1em;
}

.form-group p {
  margin-bottom: 0.25em !important;
}

.form-comment .form-group {
  margin-top: 0.25em;
}

/* Progress bar */
.progress-bar-voting {
  padding-right: 2px;
}

.progress-bar-voting .progress-bar-voting__circle {
  border: 3px solid #000000;
  width: 69px;
  height: 69px;
  font-size: 22px;
  line-height: 60px;
  margin-top: -26px;
  margin-left: 2px;
  background-color: #000000;
  color: #ffffff;
  padding-left: 4px;
}

.progress-bar-voting .progress-bar-voting__circle {
  right: -2px;
}

.progress-bar-voting__circle {
  margin-left: 4px;
}

.progress-bar-voting {
  background-color: #247e00;
}

.progress-bar-voting .progress-bar-voting__fill {
  background-color: #000000;
  border-radius: 0px;
  min-width: 69px;
}

.progress-bar-voting span {
  font-weight: 700;
  letter-spacing: -0.266px;
}

section p,
section li {
  line-height: 1.7rem;
}

/*---- Likert overrides ----*/
.panel:has(.likert-container) {
  background: #fff;
}

.likert-container .ethelo-likert-group {
  align-items: flex-start;
}

.ethelo-likert-group li.ethelo-likert-button-container .ethelo-likert-subtext,
.ethelo-voted-label li.ethelo-likert-button-container .ethelo-likert-subtext {
  display: block;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
  margin-top: 0.75em;
  text-transform: none !important;
  visibility: visible;
  font-weight: 400;
}

.ember-view.ethelo-likert-button-container {
  flex-direction: column-reverse;
}

.ethelo-likert-subtext {
  font-weight: bold;
  text-transform: unset;
}

.ember-view.ethelo-likert-button-container > a[role="button"] {
  background: #f6f6f6 !important;
  border: 2px solid #d9d9d9;
  border-radius: 50%;
  display: flex;
  height: 2em;
  padding: 1em;
  width: 2em;
}

.ember-view.ethelo-likert-button-container.active > .ethelo-likert-subtext {
  font-weight: bold;
}
.ember-view.ethelo-likert-button-container.active > a[role="button"] {
  border-color: #000000;
  box-shadow: none;
  padding: 1em;
}

.ember-view.ethelo-likert-button-container > a[role="button"] [aria-hidden] {
  display: none;
}

.ember-view.ethelo-likert-button-container.active
  > a[role="button"]
  .ethelo-likert-indicator.hidden-xs.hidden-sm {
  align-self: center;
  background: #000000;
  border-radius: 50%;
  display: block !important;
  height: unset;
  margin: 0;
  order: -1;
  padding: 0.75em;
  transform: translate(-0.75em);
  width: unset;
}

div:not(.modal-body) .ethelo-likert-label.visible-md.visible-lg {
  display: none !important;
}
.modal-body .ethelo-likert-text {
  font-weight: normal;
}

.modal-body
  .ember-view.ethelo-likert-button-container
  > a[role="button"]
  .ethelo-likert-text {
  align-self: center;
  color: #000 !important;
  transform: translateX(2em);
}
.modal-body
  .ember-view.ethelo-likert-button-container.active
  > a[role="button"]
  .ethelo-likert-text.visible-xs.visible-sm {
  font-weight: bold;
  transform: translateX(0.5em);
}

/* Remove uppercase text transformations */
.btn,
.btn-outline,
.input-group-btn .btn {
  text-transform: none;
}

.list-group-item.comment-item-container .comment-item .user-name {
  text-transform: none;
}

/* Fix font colors on results page*/
.card.result-card .detail-toggle .title {
  color: #000000;
}

.card.flat .card-body .nav-pills > li > a {
  color: #000000;
}

.panel-body {
  padding: 0px;
}

#questions-panel .panel-body div.ember-view .panel-body:not(.panel-body) {
  margin-bottom: 60px;
}

#questions-panel .panel-body div.ember-view .panel-body,
#questions-panel .panel-body div.ember-view .panel-body + .qcheckbox {
  margin-bottom: 0px;
}

.content-col .panel-body {
  padding: 0px 16px 16px 16px;
}

.content-col .panel-body:last-child {
  padding: 16px 16px 16px 16px;
}

.content-col .panel-body li:not(.comments),
.content-col .panel-body p,
.content-col .panel-body .option-description {
  line-height: 170% !important;
  font-size: 2rem;
}
.content-col .panel-body p {
  margin-bottom: calc(0.7rem + 0.1vw);
}

.ember-view :has(.navigation-button) {
  padding-bottom: 16px;
}

.list-group .list-group-item {
  padding-left: 0px;
}

.content-col .panel-body .form-group .control-label p {
  font-weight: 700;
  font-size: 2.2rem !important;
}

.nav-item-container a {
  padding: 16px;
}
.list-group-item .material-icons-outlined {
  top: 16px;
  right: 8px;
}
.option-description .option-text p {
  font-weight: 700;
  margin-bottom: 1em;
}

/* Override comment styles */
textarea.ember-text-area.form-control,
.survey-page textarea.ember-text-area.form-control,
.qtextarea {
  margin: 0;
  padding: 0;
  box-shadow: none;
  padding: 1.5em;
  /* background-color: #fff; */
  height: auto;
  min-height: 150px;
}

.survey-page .form-group {
  /* padding: 16px 40px; */
}

.list-group .row-picture img.circle {
  display: none;
}
.comment-item small {
  font-size: 1.125rem;
  display: inline-block;
  margin-right: 0.25em;
}

.comment-item small {
  text-transform: lowercase;
}

.comment-item small:first-letter {
  text-transform: uppercase;
}

.dropdown .comment-privacy-select .open {
  box-shadow: none;
}
.dropdown .comment-privacy-select {
  line-height: 100%;
}

.list-group-item.new-comment-container .btn {
  margin: 10px 24px;
}

.comments > .comment-item-container > .comment-item {
  padding-right: 2em;
}

@media only screen and (max-width: 768px) {
  .comments > .comment-item-container > .comment-item {
    padding-right: 16px;
  }
  .list-group .list-group-item .row-content {
    display: inline-block;
    width: calc(100% - 16px);
    min-height: 66px;
  }
}

.comment-item,
.comment-item,
.new-comment-container .form-group {
  display: flex;
  align-items: flex-start;
}

.comment-item:before,
    /* .new-comment-container .form-group:before,  */
    .page-survey-page .form-comment-container-outer:before,
    .page-voting-option-category .form-comment-container-outer:before {
  content: "";
  display: inline-block;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 65% !important;
  border-radius: 50%;
  padding: 2.25rem !important;
  margin-right: 1rem;
  background-image: url("https://odi-uploads.s3.us-west-2.amazonaws.com/store/cc73297c0ea1ec5a2622a5e54976f2e1.png");
}

.likert-container strong.pull-right {
  text-transform: initial;
}

button.comment-section-btns,
.form-comment-container-outer .btn.btn-raised,
.form-comment-container-outer .btn.btn-raised.btn-default {
  background-color: #247e00 !important;
}

.right-sidebar__bottom.panel-group .panel-body {
  padding: 8px;
}

.hub-container .panel-body {
  padding: 16px;
  background-color: #fff4cc;
  margin: 20px 0px;
  padding: 40px;
  border-radius: 20px;
}

.comment-item-container:nth-child(3n + 1) .comment-item:before,
.comment-replies
  .comment-item-container:nth-child(3n + 1)
  .comment-item:before {
  background-color: #f0f079;
}

.comment-item-container:nth-child(3n + 2) .comment-item:before,
.comment-replies
  .comment-item-container:nth-child(3n + 2)
  .comment-item:before {
  background-color: #fff4cc;
}

.comment-item-container:nth-child(3n + 3) .comment-item:before {
  background-color: #d9d9d9;
}

.list-group-item.comment-item-container
  .comment-item:hover
  > .row-content
  .more-actions {
  right: 1em;
}

.list-group.comments {
  margin-bottom: 60px;
}

.btn.btn-xs {
  font-size: 16px;
}

.help-block,
.form-group .help-block,
.form-group + .help-block {
  padding: 16px;
  background-color: #fff4cc;
  color: #585858;
  margin: 10px 24px;
  padding: 10px 32px;
  border-radius: 20px;
}

/*---- Radio and Checkbox ----*/
.form-group .checkbox label,
.form-group .radio label,
.form-group label {
  font-size: 2rem;
}

.checkbox,
.radio {
  margin-top: 0px;
}

.checkbox .checkbox-material,
label.checkbox-inline .checkbox-material {
  padding-right: 16px;
}

.radio + .radio,
.checkbox > br + label {
  margin-top: 0.5em;
}

.checkbox-group,
.radio-group {
  margin-bottom: 1em;
}

.form-group .dropdown:not(.comment-privacy-select, .more-actions) {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 2px solid #d9d9d9;
  border-radius: 0.25em;
  font-size: 1.5rem;
  cursor: pointer;
  background-color: #fff;
  align-items: center;
  padding: 0.75em;
  display: flex;
  margin-bottom: 16px;
}

.form-group .dropdown:not(.comment-privacy-select, .more-actions) .x-select {
  outline: none;

  background: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  transform: scaleX(108%) translateX(0.4em);
}

.x-select::-ms-expand {
  display: none;
}

.form-group .dropdown::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #247e00;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
}

/* Commenting ----*/
.comment-privacy-select {
  display: none !important;
}
.comment-like-count {
  vertical-align: baseline;
}
.flag-count {
  display: none;
}

/*-- fix next button bug (test) --*/
.container-fluid.bottom-nav-buttons * {
  float: none !important;
  width: auto !important;
}

.container-fluid.bottom-nav-buttons .btn {
  max-width: 9em; /* Don't let next button get too wide */
}

.container-fluid.bottom-nav-buttons .row.inner {
  display: flex;
  flex-direction: row;
}

/* Keep Feedback visible and just mute it on hover */
.navbar a.client-feedback,
a.client-feedback {
  color: #000000 !important;              /* base link color */
  background: transparent !important;     /* prevent theme hover bg */
  transition: color 0.2s ease;
}

.navbar a.client-feedback:hover,
a.client-feedback:hover,
.navbar a.client-feedback:focus {
  color: #d9d9d9 !important;              /* dimmer, still readable on white */
  background: transparent !important;     /* ensure no white/blue hover panel */
  text-decoration: none;
}

/* Keep the progress bar track neutral Light Grey, not Pink */
.progress-bar-voting { background-color: #d9d9d9 !important; }

/* Set the progress-fill to Pink explicitly (in case a rule above was Gold) */
.progress-bar-voting .progress-bar-voting__fill { background-color: #247e00 !important; }

/* OPTIONAL: keep the heart/favorite icon Gold (brand accent) */
i.material-icons.favorite { color: #ffdc00 !important; }

/* Hover state for pink buttons (darker pink) */
.btn.btn-raised.btn-primary:hover,
.btn.navigation-button:hover,
.btn.ethelo-likert-group-mobile:hover {
  background-color: #b30057 !important;
  border-color: #b30057 !important;
}

/* Secondary button (white with pink border/text) */
.bottom-nav-buttons > .row > div:first-child .btn.navigation-button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #247e00 !important;
}
.bottom-nav-buttons > .row > div:first-child .btn.navigation-button:hover {
  background: #f0f079 !important; /* very light pink tint */
}

/* Remove the thin divider above the Likert radios (voting page only) */
.page-voting-option-category .panel-body hr,
.page-voting-option-category .likert-container hr,
.content-col .panel-body hr {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
}

/* If the theme draws the line as a border or pseudo-element, kill those too */
.page-voting-option-category .form-group.qlikert,
.page-voting-option-category .likert-container,
.page-voting-option-category .form-group.qradio,
.page-voting-option-category .radio-group {
  border-top: 0 !important;
}

.page-voting-option-category .form-group.qlikert::before,
.page-voting-option-category .likert-container::before,
.page-voting-option-category .form-group.qradio::before,
.page-voting-option-category .radio-group::before {
  content: none !important;
  border: 0 !important;
}

/* Keep spacing consistent after removing the divider */
.page-voting-option-category .likert-container {
  margin-top: 0 !important;
}

/* Comment area: make the Post button text white */
.form-comment-container-outer .btn,
.list-group-item.new-comment-container .btn,
button.comment-section-btns {
  color: #ffffff !important;        /* white text */
}

/* keep it white on hover/focus/active too */
.form-comment-container-outer .btn:hover,
.form-comment-container-outer .btn:focus,
.form-comment-container-outer .btn:active,
.list-group-item.new-comment-container .btn:hover,
.list-group-item.new-comment-container .btn:focus,
.list-group-item.new-comment-container .btn:active,
button.comment-section-btns:hover,
button.comment-section-btns:focus,
button.comment-section-btns:active {
  color: #ffffff !important;
}

/* 1) Intro divider (dark grey) */
.page-survey-page .panel-body:first-of-type {
  border-bottom: 2px solid #585858;   /* dark grey */
  padding-bottom: 0.75em;             /* space above the line */
  margin-bottom: 0.75em;              /* space below the line */
}

/* 2) Reduce space between intro and first question (from 2em to ~1.25em) */
.page-survey-page .panel-body + div.form-group {
  padding-top: 1.25em !important;     /* was 2em in your CSS */
  margin-top: 0 !important;
}

/* 3) Make sure the question label doesn’t add extra top margin */
.page-survey-page .form-group .control-label {
  margin-top: 0 !important;
}

/* Criteria header: only when expanded (pink background) */
.card.result-card .detail-toggle[aria-expanded="true"] .labels,
.card.result-card .detail-toggle[aria-expanded="true"] .labels * {
  color: #ffffff !important;             /* turn % Consensus white */
        /* guard against link/UA overrides */
}

/* (optional) keep the chevron / icons white too */
.card.result-card .detail-toggle[aria-expanded="true"] .labels .material-icons,
.card.result-card .detail-toggle[aria-expanded="true"] .labels i {
  color: #ffffff !important;
}

/* Pie chart title to black (overrides the default blue) */
.page-results-summary .pie-chart-wrapper h2.title-main,
.page-results-group   .pie-chart-wrapper h2.title-main {
  color: #000000 !important;
  font-weight: 800;                 /* matches DAIS headings */
  letter-spacing: -0.015em;
}

/* ---------- Chart Card / Wrapper ---------- */
.page-results-summary .pie-chart-wrapper,
.page-results-group   .pie-chart-wrapper {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 24px 28px;
  margin: 16px 0;
}

/* Title above the chart */
.page-results-summary .pie-chart-wrapper h2.title.title-main,
.page-results-group   .pie-chart-wrapper h2.title.title-main {
  color: #000;                 /* black title */
  font-family: "Noto Sans", system-ui, sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 16px;
  text-align: center;
}

/* ---------- Highcharts Typography & Colors ---------- */
/* Apply a consistent professional font to all SVG text in the chart */
.pie-chart-wrapper .highcharts-root text {
  font-family: "Noto Sans", system-ui, sans-serif !important;
}

/* Chart title/subtitle inside the SVG (if used by the library) */
.pie-chart-wrapper .highcharts-title {
  fill: #000000 !important;
  font-weight: 800 !important;
  font-size: 20px !important;
}
.pie-chart-wrapper .highcharts-subtitle {
  fill: #585858 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Legend text — darker and a touch bolder */
.pie-chart-wrapper .highcharts-legend-item text {
  fill: #111111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Data labels (the % on the slices) — white with a subtle outline for readability */
.pie-chart-wrapper .highcharts-data-label text {
  fill: #ffffff !important;
  font-weight: 800 !important;
  
  stroke: rgba(0,0,0,.35);
  stroke-width: 3px;
  font-size: 14px !important;
}

/* Optional: round legend markers slightly to soften the look */
.pie-chart-wrapper .highcharts-legend-item rect,
.pie-chart-wrapper .highcharts-legend-item path {
   
}

/* ---------- Responsive touch-ups ---------- */
@media (max-width: 768px) {
  .page-results-summary .pie-chart-wrapper,
  .page-results-group   .pie-chart-wrapper {
    padding: 16px 16px;
    border-radius: 12px;
  }
  .page-results-summary .pie-chart-wrapper h2.title.title-main,
  .page-results-group   .pie-chart-wrapper h2.title.title-main {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .pie-chart-wrapper .highcharts-legend-item text,
  .pie-chart-wrapper .highcharts-data-label text {
    font-size: 13px !important;
  }
}

/* Make pie data-label numbers (##%) white */
.pie-chart-wrapper .highcharts-data-label text,
.pie-chart-wrapper .highcharts-data-label tspan {
  fill: #ffffff !important;   /* SVG labels */
  stroke: none !important;
}

/* If your chart uses useHTML labels, cover that too */
.pie-chart-wrapper .highcharts-data-label span {
  color: #ffffff !important;  /* HTML labels */
}

/* ===== Pie chart: professional polish ===== */

/* Smaller/tighter card with subtle, modern edges */
.page-results-summary .pie-chart-wrapper,
.page-results-group   .pie-chart-wrapper {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 14px 18px;     /* tighter than default */
  margin: 10px 0;         /* reduce vertical footprint */
}

/* Title slightly tighter */
.page-results-summary .pie-chart-wrapper h2.title.title-main,
.page-results-group   .pie-chart-wrapper h2.title.title-main {
  margin: 0 0 10px !important;
  font-size: 22px;
  text-align: center;
}

/* Legend a touch smaller and tighter */
.pie-chart-wrapper .highcharts-legend-item text {
  font-size: 13px !important;
  font-weight: 700 !important;
  fill: #111 !important;
}

/* ===== Make slice labels (##%) crisp & readable ===== */
.pie-chart-wrapper .highcharts-data-label text,
.pie-chart-wrapper .highcharts-data-label tspan {
  fill: #ffffff !important;                /* white numbers */
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px;                   /* improves clarity */
                       /* render stroke first for crispness */
  stroke: rgba(0,0,0,0.55);                /* dark outline for contrast */
  stroke-width: 3px;                       /* just enough edge */
  shape-rendering: geometricPrecision;     }

/* Equal top/bottom spacing around the pie chart card */
.page-results-summary .pie-chart-wrapper,
.page-results-group   .pie-chart-wrapper {
  margin: 16px 0 !important;   /* was 10px 0 — a touch more, and equal */
}

.page-results-summary .container-fluid.bottom-nav-buttons,
.page-results-group   .container-fluid.bottom-nav-buttons {
  margin-top: 8px;  /* tiny nudge, adjust to taste */
}

/* ==== Restore user thumbnails & names (override patch) ==== */

/* 1) Show the real user thumbnail again */
.list-group .row-picture img.circle {
  display: inline-block !important;   /* was none */
}

/* 2) Show the user name again */
.list-group-item.comment-item-container .comment-item .user-name {
  display: inline !important;         /* was none */
  visibility: visible !important;
}

/* 3) Remove the speech-bubble pseudo-avatar that masked thumbnails */
.comment-item:before,
.page-survey-page .form-comment-container-outer:before,
.page-voting-option-category .form-comment-container-outer:before {
  content: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4) Optional: tidy alignment after removing the pseudo-avatar */
.list-group .row-picture {
  margin-right: 12px;                 /* space between avatar and text */
}
.list-group .row-picture img.circle {
  vertical-align: middle;
  height: 48px;                       /* adjust as needed to match design */
  width: 48px;
  border-radius: 50%;
}
.list-group-item .comment-item .row-content {
  display: inline-block;              /* keeps layout stable next to avatar */
}
/* ==== Name styling: same size as comment text, but bolder & grey ==== */

/* Ensure names are visible (in case previous rule hid them) */
.list-group-item.comment-item-container .comment-item .user-name {
  display: inline !important;
  visibility: visible !important;
}

/* Match comment font-size, strengthen weight, set grey color */
.list-group-item.comment-item-container .comment-item .user-name,
.list-group-item.comment-item-container .comment-item small.user-name {
  font-size: inherit !important;      /* same size as comment text */
  line-height: inherit !important;
  font-weight: 700 !important;        /* bolder */
  color: #585858 !important;          /* grey */
  text-transform: none !important;    /* avoid the lowercase rule on <small> */
  margin-right: 0.35em;               /* a little space before the comment */
}

/* If the name is a link, keep the same look */
.list-group-item.comment-item-container .comment-item .user-name a {
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none;
}
.list-group-item.comment-item-container .comment-item .user-name a:hover,
.list-group-item.comment-item-container .comment-item .user-name a:focus {
  text-decoration: underline;
}
/* remove small topic weights from results page */
.labels .tab-pie { display: none; }


/* ==== Fix the faint white category watermark/title under "Shared Values" ==== */
/* 1) Catch common watermark/pseudo-element headings used in results pages */
.page-results-group .category-title,
.page-results-group .group-title,
.page-results-group .section-header,
.page-results-group .title-main {
  color: #111111 !important;      /* dark text */
  text-shadow: none !important;
  opacity: 1 !important;
}

/* If the theme paints the word via ::before/::after, force that dark too */
.page-results-group .category-title::before,
.page-results-group .group-title::before,
.page-results-group .section-header::before,
.page-results-group .title-main::before,
.page-results-group .panel-heading::before {
  color: #111111 !important;      /* override white watermark */
  opacity: 0.28 !important;       /* keep it subtle; raise/lower to taste */
  text-shadow: none !important;
}

/* 2) Neutralize “text-white”/inline white inside this block without touching buttons */
.page-results-group .content-col .text-white,
.page-results-group .content-col [style*="color:white"],
.page-results-group .content-col [style*="color:#fff"],
.page-results-group .content-col [style*="color: #fff"] {
  color: #111111 !important;
}

/* 3) Make sure icons don’t inherit the dark if they’re meant to be white */
.page-results-group .content-col i.material-icons,
.page-results-group .content-col i.material-icons-outlined {
  color: inherit; /* keep whatever the surrounding rule intends */
}

/***** 1) Navbar logo — smaller, without changing header height *****/
.navbar .navbar-brand img,
.navbar-brand .custom-logo,
.navbar .custom-logo,
.navbar-brand img.custom-logo {
  max-height: 48px !important;   /* ~DAIS size */
  height: 48px !important;
  width: auto !important;
  vertical-align: middle;
}

/* keep the brand slot aligned without making the bar taller */
.navbar .navbar-brand {
  line-height: 48px;              /* align with the logo height */
  padding-top: 8px;               /* subtle nudge; keep header height steady */
  padding-bottom: 8px;
}

/* mobile: slightly smaller */
@media (max-width: 768px) {
  .navbar .navbar-brand img,
  .navbar-brand .custom-logo,
  .navbar .custom-logo,
  .navbar-brand img.custom-logo {
    max-height: 42px !important;
    height: 42px !important;
  }
  .navbar .navbar-brand { line-height: 42px; }
}

/***** 2) Progress tracker circle — smaller & tidy *****/
.progress-bar-voting .progress-bar-voting__circle {
  width: 56px !important;         /* down from the big default */
  height: 56px !important;
  line-height: 48px !important;   /* centers the “0%” */
  font-size: 18px !important;
  border-width: 2px !important;
  margin-top: -20px !important;   /* sits nicely on the track */
  right: -2px;                    /* keep existing alignment */
}
.progress-bar-voting .progress-bar-voting__fill {
  min-width: 56px !important;     /* match the new circle width */
}

/* mobile: one step smaller if you like */
@media (max-width: 768px) {
  .progress-bar-voting .progress-bar-voting__circle {
    width: 50px !important;
    height: 50px !important;
    line-height: 44px !important;
    font-size: 16px !important;
    margin-top: -18px !important;
  }
  .progress-bar-voting .progress-bar-voting__fill {
    min-width: 50px !important;
  }
}