.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;
}



/*
POLITY / ETHELO — MOU STYLE
Layout-safe Polity restyle.

This file starts from the existing working Maine stylesheet and preserves its
Ethelo layout/behavior rules. The final section changes visual presentation
only: typography, colour, logo, borders, buttons, voting controls and results.
No HTML/body wrapper markup is included.
*/



.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 #2B495A;
  margin: 0 16px;
}

.scenario-panel.panel-heading::before {
  content: "Live community results" !important;
  color: #ffffff;
  font-family: "Public 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: #2B495A;
  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 top 5 options will shape our recovery action plan";
}

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

.tab-content-metrics .format {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #2B495A;
  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: #2B495A;
}

.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: #2B495A;
}
.person.bin2-color-text {
  color: #2B495A;
}
.person.bin3-color-text {
  color: #2B495A;
}
.person.bin4-color-text {
  color: #2B495A;
}
.person.bin5-color-text {
  color: #2B495A;
}
.person.bin6-color-text {
  color: #2B495A;
}
.person.bin7-color-text {
  color: #2B495A;
}
.person.bin8-color-text {
  color: #2B495A;
}
.person.bin9-color-text {
  color: #2B495A;
}
.person.bin9-color-text {
  color: #2B495A;
}
.person.bin10-color-text {
  color: #2B495A;
}
.person.bin11-color-text {
  color: #2B495A;
}
.person.bin12-color-text {
  color: #2B495A;
}
.person.bin13-color-text {
  color: #2B495A;
}

.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: #2B495A;
  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: #2B495A !important;
}

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

.likert {
  border: 3px solid #2B495A !important;
}

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

.card-header [aria-expanded="true"] {
  background-color: #2B495A !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 #2B495A;
  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: #FAF9F7;
}

.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;
}

.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: "Public 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: #2B495A !important;
}

a {
  color: #2B495A;
}

/** 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: #2B495A;
}

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

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

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

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

#balance-bar.deficit-slider .surplus,
#balance-bar.deficit-slider .deficit {
  background-color: #2B495A;
}

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

#balance-bar.deficit-slider .balanced {
  background-color: #8399A6;
}

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

#balance-bar.deficit-slider .tooltip-inner {
  background-color: #1B3442;
}

/* 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: #FFF4EA;
  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; */
}

.top-navigation-btn {
  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 strong {
  display: none;
}

.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;
}

/* Hide User name and sign up boxes in login */
label[for="auth_name"] {
  display: none;
}
input#auth_name {
  display: none;
}

.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: #2B495A;
  text-decoration: underline;
}

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

.form-group.has-error .help-block,
.form-group.has-error label.control-label {
  color: #FFE5CE;
  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: "Public Sans", system-ui, sans-serif !important;
}

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

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

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

.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: #FAF9F7;
}

/* 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: "Public 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: #C15800;
  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: "Public 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: #FFF4EA;
  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: #2B495A !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: "Public 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: #2B495A;
}

.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 #2B495A;
}

.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 #2B495A !important;
  outline: 1px solid #000 !important;
}

.bottom-nav-buttons > .row .btn.navigation-button[aria-label="NEXT"] {
  background-color: #2B495A;
  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: #2B495A;
  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: #FFE5CE;
}

/* 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 #DFDEDA;
  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: #2B495A;
}

.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 #DFDEDA;
  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://polity-production-764416828646-uploads.s3.ca-central-1.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: #2B495A !important;
}

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

.hub-container .panel-body {
  padding: 16px;
  background-color: #FFF4EA;
  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: #FFE5CE;
}

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

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

.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: #FFF4EA;
  color: #5F5E59;
  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 #DFDEDA;
  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: #2B495A;
  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: #DFDEDA !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: #DFDEDA !important; }

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

/* OPTIONAL: keep the heart/favorite icon Gold (brand accent) */
i.material-icons.favorite { color: #C15800 !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: ##1B3442 !important;
  border-color: ##1B3442 !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 #2B495A !important;
}
.bottom-nav-buttons > .row > div:first-child .btn.navigation-button:hover {
  background: #FFE5CE !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 #5F5E59;   /* 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: "Public 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: "Public 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: #5F5E59 !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: #5F5E59 !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;
  }
}


/* Replace the Engaged California login image with your Polity image */
#signup-page-text img {
  content: url("https://polity-production-764416828646-uploads.s3.ca-central-1.amazonaws.com/store/6fc494bb45a71fb5d57897d14af48a12.png") !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Optional: tighten spacing so it doesn't feel oversized */
#signup-page-text {
  margin-top: 12px;
}


/* ---- Collapsible “Region” buttons ---- */

.dropdown-link{
  margin: 0 0 10px 0;
}

.dropdown-link .expansion-toggle{
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.dropdown-link .expansion-toggle:hover{
  background: #eef2ff;
  border-color: rgba(79,70,229,.35);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.dropdown-link .expansion-toggle:active{
  transform: translateY(1px);
}

/* Focus ring for keyboard users */
.dropdown-link .expansion-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.25);
  border-color: rgba(79,70,229,.55);
}

/* The open panel */
.collapse{
  margin: 0 0 14px 0;
}

.collapse > p{
  margin: 8px 0 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  background: #ffffff;
  color: #374151;
  line-height: 1.55;
}

/* If your collapse plugin adds .in or .show on open, highlight the trigger */
.collapse.in + .dropdown-link .expansion-toggle,
.collapse.show + .dropdown-link .expansion-toggle{
  background: #eef2ff;
  border-color: rgba(79,70,229,.45);
}
/* Open state styling (when the collapse is expanded) */
.dropdown-link .expansion-toggle[aria-expanded="true"]{
  background: #eef2ff;
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Optional: if you want + / – controlled by CSS (don’t also hardcode “+ ” in the HTML text) */
.dropdown-link .expansion-toggle::before{ content:"+ "; }
.dropdown-link .expansion-toggle[aria-expanded="true"]::before{ content:"– "; }


.btn.btn-raised.btn-primary,
.btn.navigation-button,
.btn.ethelo-likert-group-mobile {
  color: #ffffff !important;
}


/* ==========================================================================
   POLITY VISUAL SKIN — LAYOUT-SAFE OVERRIDES
   Keeps the existing Maine/Ethelo page structure intact.
   ========================================================================== */

/* Typography */
.main-content,
.main-content p,
.main-content li,
.main-content label,
.main-content input,
.main-content textarea,
.main-content select,
.main-content button,
.main-content .btn,
.main-content .form-control,
.main-content .navbar,
.main-content .list-group,
.main-content .panel {
  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #121210;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content .h1,
.main-content .h2,
.main-content .h3,
.main-content #page-header,
.main-content .display-text,
.main-content .panel-slider__title,
.main-content .card.result-card .detail-toggle .title,
.main-content .navbar .decision-title {
  font-family: "Archivo", "Public Sans", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #121210 !important;
}

.main-content h1,
.main-content .h1,
.main-content #page-header {
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

.main-content h2,
.main-content .h2 {
  font-weight: 600 !important;
  line-height: 1.18 !important;
}

.main-content h3,
.main-content .h3 {
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.main-content strong,
.main-content b {
  font-weight: 700 !important;
}

/* Canvas and text */
.main-content {
  background: #FAF9F7 !important;
  color: #121210 !important;
}

.main-content p,
.main-content li,
.main-content .option-description,
.main-content .result-info p {
  color: #2A2926 !important;
}

.main-content a {
  color: #2B495A !important;
  
}

.main-content a:hover,
.main-content a:focus {
  color: #9F3F00 !important;
}

/* Header / brand — visual only, no grid changes */
/* Logo source/display is intentionally untouched; it comes from Ethelo admin. */
.main-content .navbar.primary-accent-bg,
.main-content .navbar.navbar-default.primary-accent-bg {
  background: #FFFFFF !important;
  border: 0 !important;
  border-bottom: 4px solid #C15800 !important;
  box-shadow: none !important;
}

/* Project logo is supplied by the Ethelo admin panel.
   Let Ethelo/Bootstrap render its desktop and mobile logo elements normally. */

.main-content .navbar .navbar-nav > li.decision-title,
.main-content .navbar-brand.decision-title {
  color: #1B3442 !important;
  font-family: "Archivo", "Public Sans", sans-serif !important;
  font-weight: 600 !important;
}

.main-content .navbar .navbar-nav > li > a,
.main-content .navbar a.client-feedback,
.main-content .navbar-user-dropdown,
.main-content .navbar-user-dropdown a {
  color: #2B495A !important;
  background: transparent !important;
}

.main-content .navbar .navbar-nav > li > a:hover,
.main-content .navbar a.client-feedback:hover,
.main-content .navbar-user-dropdown a:hover {
  color: #9F3F00 !important;
  background: #FFF4EA !important;
}

/* Left navigation */
.main-content .nav-item-container,
.main-content .nav-item-container a {
  color: #2A2926 !important;
}

.main-content .nav-item.active,
.main-content .nav-item-container.active,
.main-content .list-group-item.active,
.main-content .nav-item-container a.active {
  background: #FFF4EA !important;
  color: #121210 !important;
  border-left-color: #C15800 !important;
}

.main-content .nav-item.active a,
.main-content .nav-item-container.active a,
.main-content .list-group-item.active a {
  color: #792C00 !important;
  font-weight: 700 !important;
}

.main-content .list-group-item .material-icons-outlined.half-complete,
.main-content .list-group-item .material-icons.complete,
.main-content .list-group-item .material-icons-outlined.complete {
  color: #208046 !important;
}

/* Page titles — do not reposition */
.main-content #page-header,
.main-content #main-block-center > h1:first-child,
.main-content .content-col > h1:first-child {
  text-align: left !important;
  color: #121210 !important;
}

/* Panels and accordions */
.main-content .panel,
.main-content div[class*="-column"] .panel,
.main-content [role="main"] .panel {
  border-color: #DFDEDA !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.main-content .panel.panel-default > .panel-heading,
.main-content .panel > .panel-heading {
  border-bottom-color: #DFDEDA !important;
}

.main-content .panel-heading,
.main-content .card {
  color: #121210;
}

.main-content .expansion-toggle.primary-accent-bg,
.main-content .panel-slider .expansion-toggle.primary-accent-bg,
.main-content .panel-heading .expansion-toggle.primary-accent-bg {
  background: #FFF4EA !important;
  color: #121210 !important;
  border-left: 4px solid #C15800 !important;
  box-shadow: none !important;
}

.main-content .expansion-toggle.primary-accent-bg *,
.main-content .panel-slider .expansion-toggle.primary-accent-bg *,
.main-content .panel-heading .expansion-toggle.primary-accent-bg * {
  color: #121210 !important;
}

.main-content .expansion-toggle.primary-accent-bg:hover,
.main-content .panel-slider .expansion-toggle.primary-accent-bg:hover {
  background: #FFE5CE !important;
}

/* Buttons */
.main-content .btn.btn-raised.btn-primary,
.main-content .btn.navigation-button[aria-label="NEXT"],
.main-content .form-comment-container-outer .btn.btn-raised,
.main-content button.comment-section-btns {
  background: #C15800 !important;
  border: 2px solid #C15800 !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: "Public Sans", sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.main-content .btn.btn-raised.btn-primary:hover,
.main-content .btn.navigation-button[aria-label="NEXT"]:hover,
.main-content .form-comment-container-outer .btn.btn-raised:hover,
.main-content button.comment-section-btns:hover {
  background: #9F3F00 !important;
  border-color: #9F3F00 !important;
}

.main-content .bottom-nav-buttons > .row > div:first-child .btn.navigation-button,
.main-content .btn.btn-default,
.main-content .btn.btn-raised.btn-default {
  background: #FFFFFF !important;
  border: 2px solid #2B495A !important;
  color: #2B495A !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.main-content .bottom-nav-buttons > .row > div:first-child .btn.navigation-button:hover,
.main-content .btn.btn-default:hover,
.main-content .btn.btn-raised.btn-default:hover {
  background: #F3F7FA !important;
  color: #1B3442 !important;
}

.main-content .btn.btn-raised.btn-danger {
  background: #FFFFFF !important;
  border: 2px solid #BE2327 !important;
  color: #BE2327 !important;
}

/* Form controls */
.main-content .form-control,
.main-content .form-group .form-control,
.main-content textarea.ember-text-area.form-control,
.main-content .survey-page textarea.ember-text-area.form-control {
  background-color: #FFFFFF !important;
  color: #121210 !important;
  border: 1px solid #C9C7C2 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.main-content .form-control:focus,
.main-content .form-group .form-control:focus {
  border-color: #C15800 !important;
  box-shadow: 0 0 0 3px rgba(193, 88, 0, 0.14) !important;
}

.main-content .required {
  color: #C15800 !important;
}

.main-content .help-block,
.main-content .form-group .help-block,
.main-content .form-group + .help-block,
.main-content .prompt-box,
.main-content .hub-container .panel-body {
  background: #FFF4EA !important;
  border: 1px solid #FFE5CE !important;
  border-radius: 8px !important;
  color: #43423E !important;
}

/* Likert / voting */
.main-content .ember-view.ethelo-likert-button-container > a[role="button"] {
  background: #FFFFFF !important;
  border: 2px solid #C9C7C2 !important;
  box-shadow: none !important;
}

.main-content .ember-view.ethelo-likert-button-container > a[role="button"]:hover {
  border-color: #C15800 !important;
  background: #FFF4EA !important;
}

.main-content .ember-view.ethelo-likert-button-container.active > a[role="button"] {
  border-color: #C15800 !important;
  background: #FFF4EA !important;
}

.main-content .ember-view.ethelo-likert-button-container.active
  > a[role="button"]
  .ethelo-likert-indicator.hidden-xs.hidden-sm {
  background: #C15800 !important;
}

.main-content .likert-block.filled {
  background: #C15800 !important;
}

.main-content .likert {
  border-color: #C15800 !important;
}

/* Progress */
.main-content .progress-bar-voting {
  background: #DFDEDA !important;
}

.main-content .progress-bar-voting .progress-bar-voting__fill {
  background: #C15800 !important;
}

.main-content .progress-bar-voting .progress-bar-voting__circle {
  background: #FFFFFF !important;
  border-color: #C15800 !important;
  color: #792C00 !important;
}

/* Comments */
.main-content .comment-item-container {
  border-bottom-color: #DFDEDA !important;
}

.main-content .comment-item small,
.main-content .comment-item-container a small {
  color: #5F5E59 !important;
}

.main-content .comment-item-container:nth-child(3n + 1) .comment-item:before,
.main-content .comment-replies .comment-item-container:nth-child(3n + 1) .comment-item:before {
  background-color: #FFE5CE !important;
}

.main-content .comment-item-container:nth-child(3n + 2) .comment-item:before,
.main-content .comment-replies .comment-item-container:nth-child(3n + 2) .comment-item:before {
  background-color: #E5ECF1 !important;
}

.main-content .comment-item-container:nth-child(3n + 3) .comment-item:before {
  background-color: #DFDEDA !important;
}

/* Results */
.main-content .page-results-group .panel.panel-default > .panel-heading,
.main-content .results-summary-page .panel.panel-default > .panel-heading {
  background: #2B495A !important;
  color: #FFFFFF !important;
  border-color: #2B495A !important;
}

.main-content .page-results-group .panel.panel-default > .panel-heading *,
.main-content .results-summary-page .panel.panel-default > .panel-heading * {
  color: #FFFFFF !important;
}

.main-content .card.result-card .detail-toggle.collapsed {
  background: #FFFFFF !important;
  color: #121210 !important;
  border-color: #DFDEDA !important;
}

.main-content .card.result-card .detail-toggle[aria-expanded="true"] {
  background: #2B495A !important;
  color: #FFFFFF !important;
  border-color: #2B495A !important;
}

.main-content .card.result-card .detail-toggle[aria-expanded="true"] *,
.main-content .card.result-card .detail-toggle[aria-expanded="true"] .title,
.main-content .card.result-card .detail-toggle[aria-expanded="true"] .labels,
.main-content .card.result-card .detail-toggle[aria-expanded="true"] .labels * {
  color: #FFFFFF !important;
}

.main-content .card.flat .card-body .nav {
  border-bottom-color: #DFDEDA !important;
}

.main-content .card.flat .card-body .nav-pills > li.active > a {
  border-bottom-color: #C15800 !important;
  color: #792C00 !important;
}

.main-content .distribution-captions .distribution-caption {
  background: #2B495A !important;
  color: #FFFFFF !important;
}

.main-content .histogram-bar-chart rect.highcharts-color-0 {
  fill: #C15800 !important;
}

.main-content .pie-chart-wrapper .highcharts-root text {
  font-family: "Public Sans", sans-serif !important;
}

.main-content .pie-chart-wrapper .highcharts-title,
.main-content .pie-chart-wrapper .highcharts-legend-item text {
  fill: #121210 !important;
}

/* Semantic colours */
.main-content .has-success,
.main-content .text-success,
.main-content .success {
  color: #208046 !important;
}

.main-content .has-warning,
.main-content .text-warning,
.main-content .warning {
  color: #B98000 !important;
}

.main-content .has-error,
.main-content .text-danger,
.main-content .danger {
  color: #BE2327 !important;
}

/* Remove stale instance-specific generated copy from the old stylesheet. */
.main-content .scenario-panel-default::before,
.main-content .scenario-panel::before,
.main-content .scenario-panel.panel-heading::before {
  content: none !important;
}

/* Accessibility */
.main-content *:focus-visible {
  outline: 3px solid rgba(193, 88, 0, 0.32) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   POLITY COLLAPSIBLE / ACCORDION
   Refined to match the Polity design system:
   - clearly reads as an interactive card, not a page heading
   - border-led, no heavy shadow
   - 8px card radius
   - Public Sans control typography
   - slate structure, amber active accent
   - consistent closed/open treatment
   ========================================================================== */

/* The whole disclosure is one card/window. */
.main-content .panel.bootstrap-collapse,
.main-content .bootstrap-collapse.panel {
  background: #FFFFFF !important;
  border: 1px solid #DFDEDA !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
}

/* Remove legacy panel-heading spacing/borders; the toggle itself becomes the header. */
.main-content .panel.bootstrap-collapse > .panel-heading,
.main-content .bootstrap-collapse.panel > .panel-heading {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Interactive header row. */
.main-content .panel.bootstrap-collapse > .panel-heading .expansion-toggle,
.main-content .bootstrap-collapse.panel > .panel-heading .expansion-toggle {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 56px !important;
  box-sizing: border-box !important;

  padding: 16px 52px 16px 20px !important;

  background: #FFFFFF !important;
  color: #2B495A !important;
  border: 0 !important;
  border-left: 4px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease !important;
}

/* Make it look obviously interactive before it is opened. */
.main-content .panel.bootstrap-collapse > .panel-heading .expansion-toggle:hover,
.main-content .bootstrap-collapse.panel > .panel-heading .expansion-toggle:hover {
  background: #F3F7FA !important;
  color: #1B3442 !important;
  text-decoration: none !important;
}

/* Open state: a quiet slate surface with one amber marker. */
.main-content .panel.bootstrap-collapse > .panel-heading .expansion-toggle[aria-expanded="true"],
.main-content .bootstrap-collapse.panel > .panel-heading .expansion-toggle[aria-expanded="true"] {
  background: #F3F7FA !important;
  color: #121210 !important;
  border-left-color: #C15800 !important;
  text-decoration: none !important;
}

/* Focus state is clear without turning the component into a bright box. */
.main-content .panel.bootstrap-collapse > .panel-heading .expansion-toggle:focus,
.main-content .bootstrap-collapse.panel > .panel-heading .expansion-toggle:focus {
  outline: 3px solid rgba(193, 88, 0, 0.24) !important;
  outline-offset: -3px !important;
  text-decoration: none !important;
}

/* This is a control label, not an H2/H3 page heading. */
.main-content .panel.bootstrap-collapse .panel-slider__title,
.main-content .panel.bootstrap-collapse .h4.panel-slider__title,
.main-content .bootstrap-collapse.panel .panel-slider__title,
.main-content .bootstrap-collapse.panel .h4.panel-slider__title,
.main-content .panel.bootstrap-collapse .panel-slider__title .float-left,
.main-content .bootstrap-collapse.panel .panel-slider__title .float-left {
  margin: 0 !important;
  padding: 0 !important;

  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;

  color: inherit !important;
  text-decoration: none !important;
  text-transform: none !important;
}

/* Ensure no inherited anchor/title underline survives. */
.main-content .panel.bootstrap-collapse .expansion-toggle *,
.main-content .bootstrap-collapse.panel .expansion-toggle * {
  text-decoration: none !important;
}

/* Chevron placement and state. */
.main-content .panel.bootstrap-collapse .expansion-toggle .material-icons,
.main-content .bootstrap-collapse.panel .expansion-toggle .material-icons {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #5E7989 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.main-content .panel.bootstrap-collapse .expansion-toggle .expand-more,
.main-content .bootstrap-collapse.panel .expansion-toggle .expand-more {
  display: block !important;
}

.main-content .panel.bootstrap-collapse .expansion-toggle .expand-less,
.main-content .bootstrap-collapse.panel .expansion-toggle .expand-less {
  display: none !important;
}

.main-content .panel.bootstrap-collapse .expansion-toggle[aria-expanded="true"] .expand-more,
.main-content .bootstrap-collapse.panel .expansion-toggle[aria-expanded="true"] .expand-more {
  display: none !important;
}

.main-content .panel.bootstrap-collapse .expansion-toggle[aria-expanded="true"] .expand-less,
.main-content .bootstrap-collapse.panel .expansion-toggle[aria-expanded="true"] .expand-less {
  display: block !important;
}

/* The open content remains visually part of the same card. */
.main-content .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .panel.bootstrap-collapse > .collapsing > .panel-body,
.main-content .bootstrap-collapse.panel > .collapse > .panel-body,
.main-content .bootstrap-collapse.panel > .collapsing > .panel-body {
  background: #FAF9F7 !important;
  border: 0 !important;
  border-top: 1px solid #DFDEDA !important;

  margin: 0 !important;
  padding: 20px !important;

  color: #2A2926 !important;
  font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Keep normal reading rhythm inside the disclosure. */
.main-content .panel.bootstrap-collapse > .collapse > .panel-body > :first-child,
.main-content .bootstrap-collapse.panel > .collapse > .panel-body > :first-child {
  margin-top: 0 !important;
}

.main-content .panel.bootstrap-collapse > .collapse > .panel-body > :last-child,
.main-content .bootstrap-collapse.panel > .collapse > .panel-body > :last-child {
  margin-bottom: 0 !important;
}

.main-content .panel.bootstrap-collapse > .collapse > .panel-body p,
.main-content .panel.bootstrap-collapse > .collapse > .panel-body li,
.main-content .bootstrap-collapse.panel > .collapse > .panel-body p,
.main-content .bootstrap-collapse.panel > .collapse > .panel-body li {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #2A2926 !important;
}

/* Optional polish for browsers supporting :has(): subtly strengthen the card
   border while it is open, without adding a shadow. */
@supports selector(.panel:has(> .collapse.in)) {
  .main-content .panel.bootstrap-collapse:has(> .collapse.in),
  .main-content .bootstrap-collapse.panel:has(> .collapse.in),
  .main-content .panel.bootstrap-collapse:has(> .collapse.show),
  .main-content .bootstrap-collapse.panel:has(> .collapse.show) {
    border-color: #AABAC4 !important;
  }
}

/* Mobile: preserve the same visual hierarchy with a slightly tighter header. */
@media (max-width: 768px) {
  .main-content .panel.bootstrap-collapse > .panel-heading .expansion-toggle,
  .main-content .bootstrap-collapse.panel > .panel-heading .expansion-toggle {
    min-height: 52px !important;
    padding: 14px 48px 14px 16px !important;
  }

  .main-content .panel.bootstrap-collapse .panel-slider__title,
  .main-content .bootstrap-collapse.panel .panel-slider__title,
  .main-content .panel.bootstrap-collapse .panel-slider__title .float-left,
  .main-content .bootstrap-collapse.panel .panel-slider__title .float-left {
    font-size: 16px !important;
  }

  .main-content .panel.bootstrap-collapse > .collapse > .panel-body,
  .main-content .bootstrap-collapse.panel > .collapse > .panel-body {
    padding: 16px !important;
  }
}

/* ==========================================================================
   NESTED DISCLOSURE WRAPPER FIX
   Ethelo automatically wraps page HTML in its own .panel.bootstrap-collapse.
   When a custom accordion is placed inside that page content, the outer Ethelo
   panel should disappear visually; only the inner disclosure should read as a card.
   ========================================================================== */

@supports selector(.panel:has(.panel)) {

  /* The automatically generated Ethelo page panel that contains our custom panel. */
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Its content area stays part of the normal page canvas.
     Retain the useful content inset, but remove the enclosing-card treatment. */
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse)
  > .collapse > .panel-body,
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse)
  > .collapsing > .panel-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
  }

  /* Do not let the generic open-state border rule restore the outer border. */
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse.collapse.in),
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse.show),
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(.panel.bootstrap-collapse) {
    border-color: transparent !important;
  }

  /* The nested/manual accordion remains the actual visual card. */
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]
  .panel.bootstrap-collapse {
    background: #FFFFFF !important;
    border: 1px solid #DFDEDA !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   ETHELO PAGE-CONTENT WRAPPERS — BORDERLESS
   Ethelo wraps ordinary page content in a .panel.bootstrap-collapse whose id
   begins "center-page-". That wrapper is structural and should not read as a
   card. Explicit accordions/panels inside the page keep their own borders.
   ========================================================================== */

.main-content .content-col .panel.bootstrap-collapse[id^="center-page-"] {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Keep ordinary page copy on the open canvas rather than inside a white box. */
.main-content .content-col
.panel.bootstrap-collapse[id^="center-page-"]
> .collapse > .panel-body,
.main-content .content-col
.panel.bootstrap-collapse[id^="center-page-"]
> .collapsing > .panel-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Defeat the generic "open accordion" border strengthening for structural
   center-page wrappers. */
@supports selector(.panel:has(> .collapse.in)) {
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(> .collapse.in),
  .main-content .content-col
  .panel.bootstrap-collapse[id^="center-page-"]:has(> .collapse.show) {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* A deliberate custom accordion nested inside a page-content wrapper is still
   a card and keeps the Polity disclosure treatment. */
.main-content .content-col
.panel.bootstrap-collapse[id^="center-page-"] .panel.bootstrap-collapse,
.main-content .content-col
.panel.bootstrap-collapse[id^="center-page-"] .bootstrap-collapse.panel {
  border: 1px solid #DFDEDA !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

/* ==========================================================================
   COMMENTS SECTION — BORDERLESS OUTER WRAPPER
   Ethelo renders the Comments area as its own .panel.bootstrap-collapse.
   Treat that panel as page structure, not as a card. Keep the textarea border.
   ========================================================================== */

.main-content #page-comments-position-center > .ember-view > .panel.bootstrap-collapse,
.main-content #page-comments-position-center .panel.bootstrap-collapse {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Keep the Comments toggle visually identifiable without boxing the whole section. */
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .panel-heading {
  background: #F3F7FA !important;
  border: 0 !important;
  border-bottom: 1px solid #DFDEDA !important;
  border-left: 4px solid #C15800 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Comments header typography */
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .panel-heading .expansion-toggle,
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .panel-heading .panel-slider__title,
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .panel-heading .panel-slider__title * {
  color: #121210 !important;
  text-decoration: none !important;
}

/* The open comments body sits directly on the page canvas. */
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .collapse > .panel-body,
.main-content #page-comments-position-center
.panel.bootstrap-collapse > .collapsing > .panel-body {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Prevent generic open-panel rules from restoring a border. */
@supports selector(.panel:has(> .collapse.in)) {
  .main-content #page-comments-position-center
  .panel.bootstrap-collapse:has(> .collapse.in),
  .main-content #page-comments-position-center
  .panel.bootstrap-collapse:has(> .collapse.show) {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* The textarea is still a form control and should retain its own quiet boundary. */
.main-content #page-comments-position-center textarea.form-control,
.main-content #page-comments-position-center textarea.ember-text-area.form-control {
  border: 1px solid #C9C7C2 !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
}

/* ROUNDTABLE MOU COMPACT OVERRIDES V2 */

/* Compact the MOU voting pages while retaining readable type. */
.main-content .voting-option-page h1.main,
.main-content .voting-option-page #page-header {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  line-height: 1.12 !important;
}

.main-content .voting-option-page .panel.bootstrap-collapse,
.main-content .voting-option-page .bootstrap-collapse.panel {
  margin-bottom: 10px !important;
}

.main-content .voting-option-page .bootstrap-collapse-heading > .expansion-toggle,
.main-content .voting-option-page .bootstrap-collapse-heading > a.expansion-toggle {
  min-height: 0 !important;
  padding: 8px 44px 8px 14px !important;
}

.main-content .voting-option-page .bootstrap-collapse-heading .panel-slider__title,
.main-content .voting-option-page .bootstrap-collapse-heading .panel-slider__title .float-left {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
}

.main-content .voting-option-page .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .voting-option-page .panel.bootstrap-collapse > .collapsing > .panel-body,
.main-content .voting-option-page .bootstrap-collapse.panel > .collapse > .panel-body,
.main-content .voting-option-page .bootstrap-collapse.panel > .collapsing > .panel-body {
  padding: 11px 14px !important;
  font-size: 15px !important;
  line-height: 1.32 !important;
}

.main-content .voting-option-page .panel-body p,
.main-content .voting-option-page .panel-body li,
.main-content .voting-option-page .panel-body .option-description,
.main-content .voting-option-page .panel-body .criterion-description,
.main-content .voting-option-page .panel-body .option-text,
.main-content .voting-option-page .panel-body .criterion-text {
  font-size: 15px !important;
  line-height: 1.32 !important;
}

.main-content .voting-option-page .panel-body p {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.main-content .voting-option-page .panel-body p + p {
  margin-top: 6px !important;
}

.main-content .voting-option-page .option-description,
.main-content .voting-option-page .criterion-description {
  margin: 0 0 6px !important;
}

.main-content .voting-option-page .option-description .option-text,
.main-content .voting-option-page .criterion-description .criterion-text {
  padding: 0 !important;
}

.main-content .voting-option-page .ethelo-likert-group {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

.main-content .voting-option-page .ethelo-likert-subtext {
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.main-content .voting-option-page .panel-bottom {
  margin-top: 7px !important;
  padding-top: 6px !important;
}

.main-content .voting-option-page .panel-bottom .comment-title {
  margin: 0 0 6px !important;
  padding-bottom: 0 !important;
}

.main-content .voting-option-page .new-comment textarea.form-control {
  height: 64px !important;
  min-height: 64px !important;
}

/* Make the five desktop vote targets true circles and center selection. */
@media (min-width: 992px) {
  .main-content .voting-option-page .ethelo-likert-group .ethelo-likert-button-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .main-content .voting-option-page .ember-view.ethelo-likert-button-container > a[role="button"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .main-content .voting-option-page .ember-view.ethelo-likert-button-container > a[role="button"] .ripple-container {
    border-radius: 50% !important;
  }

  .main-content .voting-option-page .ember-view.ethelo-likert-button-container.active
    > a[role="button"]
    .ethelo-likert-indicator.hidden-xs.hidden-sm {
    position: absolute !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: none !important;
  }
}

/* Results: use pale headers with explicit dark text in every state. */
.main-content .page-results-group .results-by-option-category .panel.panel-default > .panel-heading,
.main-content .results-summary-page .results-by-option-category .panel.panel-default > .panel-heading,
.main-content .page-results-group .results-by-option-category .bootstrap-collapse-heading,
.main-content .results-summary-page .results-by-option-category .bootstrap-collapse-heading {
  background-color: #F1F4F7 !important;
  color: #18324A !important;
}

.main-content .page-results-group .results-by-option-category .panel-slider__title,
.main-content .page-results-group .results-by-option-category .panel-slider__title *,
.main-content .results-summary-page .results-by-option-category .panel-slider__title,
.main-content .results-summary-page .results-by-option-category .panel-slider__title * {
  color: #18324A !important;
}

.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle,
.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle.collapsed,
.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle[aria-expanded="true"],
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle,
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle.collapsed,
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle[aria-expanded="true"] {
  background-color: #F1F4F7 !important;
  border-color: #D7DEE4 !important;
  color: #18324A !important;
}

.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle *,
.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle .title,
.main-content .page-results-group .results-by-option-category .card.result-card .detail-toggle .labels,
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle *,
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle .title,
.main-content .results-summary-page .results-by-option-category .card.result-card .detail-toggle .labels {
  color: #18324A !important;
}

.main-content .page-results-group .card.result-card .detail-toggle .title,
.main-content .page-results-group .card.result-card .detail-toggle .labels,
.main-content .results-summary-page .card.result-card .detail-toggle .title,
.main-content .results-summary-page .card.result-card .detail-toggle .labels {
  padding: 8px 10px !important;
  line-height: 1.25 !important;
}

.main-content .page-results-group .card.result-card,
.main-content .results-summary-page .card.result-card {
  margin-bottom: 3px !important;
}

@media (max-width: 767px) {
  .main-content .voting-option-page .panel.bootstrap-collapse > .collapse > .panel-body,
  .main-content .voting-option-page .bootstrap-collapse.panel > .collapse > .panel-body {
    padding: 9px 10px !important;
  }

  .main-content .page-results-group .card.result-card .detail-toggle,
  .main-content .results-summary-page .card.result-card .detail-toggle {
    flex-wrap: wrap !important;
  }

  .main-content .page-results-group .card.result-card .detail-toggle .title,
  .main-content .page-results-group .card.result-card .detail-toggle .labels,
  .main-content .results-summary-page .card.result-card .detail-toggle .title,
  .main-content .results-summary-page .card.result-card .detail-toggle .labels {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* ROUNDTABLE MOU DEPLOYED-SELECTOR FIX V3 */

/* The deployed Ethelo wrapper is .page-voting-option-category. */
.main-content .page-voting-option-category h1.main,
.main-content .page-voting-option-category #page-header {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  line-height: 1.12 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse,
.main-content .page-voting-option-category .bootstrap-collapse.panel {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.main-content .page-voting-option-category .bootstrap-collapse-heading > .expansion-toggle,
.main-content .page-voting-option-category .bootstrap-collapse-heading > a.expansion-toggle {
  min-height: 0 !important;
  padding: 8px 44px 8px 14px !important;
}

.main-content .page-voting-option-category .bootstrap-collapse-heading .panel-slider__title,
.main-content .page-voting-option-category .bootstrap-collapse-heading .panel-slider__title .float-left {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapsing > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapsing > .panel-body {
  padding: 11px 14px !important;
  font-size: 15px !important;
  line-height: 1.32 !important;
}

.main-content .page-voting-option-category .panel-body p,
.main-content .page-voting-option-category .panel-body li,
.main-content .page-voting-option-category .panel-body .option-description,
.main-content .page-voting-option-category .panel-body .criterion-description,
.main-content .page-voting-option-category .panel-body .option-text,
.main-content .page-voting-option-category .panel-body .criterion-text {
  font-size: 15px !important;
  line-height: 1.32 !important;
}

.main-content .page-voting-option-category .panel-body p {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.main-content .page-voting-option-category .panel-body p + p {
  margin-top: 6px !important;
}

.main-content .page-voting-option-category .option-description,
.main-content .page-voting-option-category .criterion-description {
  margin: 0 0 6px !important;
}

.main-content .page-voting-option-category .option-description .option-text,
.main-content .page-voting-option-category .criterion-description .criterion-text {
  padding: 0 !important;
}

.main-content .page-voting-option-category .likert-container {
  margin-top: 0 !important;
  padding: 4px 12px !important;
}

.main-content .page-voting-option-category .ethelo-likert-group {
  margin-top: 5px !important;
  margin-bottom: 7px !important;
}

.main-content .page-voting-option-category .ethelo-likert-subtext {
  margin-top: 5px !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.main-content .page-voting-option-category .panel-bottom {
  margin-top: 7px !important;
  padding-top: 6px !important;
}

.main-content .page-voting-option-category .panel-bottom .comment-title {
  margin: 0 0 6px !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .new-comment textarea.form-control,
.main-content .page-voting-option-category textarea.ember-text-area.form-control {
  height: 64px !important;
  min-height: 64px !important;
  padding: 10px !important;
}

/* True circular desktop vote targets; override the later generic .btn rule. */
@media (min-width: 992px) {
  .main-content .page-voting-option-category .ethelo-likert-group .ethelo-likert-button-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
  }

  .main-content .page-voting-option-category a.ethelo-likert-button.btn,
  .main-content .page-voting-option-category .ember-view.ethelo-likert-button-container > a[role="button"] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .main-content .page-voting-option-category a.ethelo-likert-button.btn .ripple-container {
    border-radius: 999px !important;
  }

  .main-content .page-voting-option-category .ember-view.ethelo-likert-button-container.active
    > a.ethelo-likert-button[role="button"]
    .ethelo-likert-indicator.hidden-xs.hidden-sm {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transform: none !important;
  }
}

/* Results cards: explicit pale surface and dark text in collapsed/open states. */
.main-content .page-results-group .card.result-card .detail-toggle,
.main-content .page-results-group .card.result-card .detail-toggle.collapsed,
.main-content .page-results-group .card.result-card .detail-toggle[aria-expanded="true"],
.main-content .results-summary-page .card.result-card .detail-toggle,
.main-content .results-summary-page .card.result-card .detail-toggle.collapsed,
.main-content .results-summary-page .card.result-card .detail-toggle[aria-expanded="true"] {
  background: #F1F4F7 !important;
  border-color: #D7DEE4 !important;
  color: #18324A !important;
}

.main-content .page-results-group .card.result-card .detail-toggle *,
.main-content .page-results-group .card.result-card .detail-toggle .title,
.main-content .page-results-group .card.result-card .detail-toggle .labels,
.main-content .page-results-group .card.result-card .detail-toggle .label,
.main-content .results-summary-page .card.result-card .detail-toggle *,
.main-content .results-summary-page .card.result-card .detail-toggle .title,
.main-content .results-summary-page .card.result-card .detail-toggle .labels,
.main-content .results-summary-page .card.result-card .detail-toggle .label {
  color: #18324A !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.main-content .page-results-group .results-by-option-category .panel-heading,
.main-content .page-results-group .results-by-option-category .panel-heading *,
.main-content .results-summary-page .results-by-option-category .panel-heading,
.main-content .results-summary-page .results-by-option-category .panel-heading * {
  background-color: #F1F4F7 !important;
  color: #18324A !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Specificity corrections for legacy !important rules. */
.main-content .page-voting-option-category .panel.bootstrap-collapse > .panel-heading .expansion-toggle,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .panel-heading .expansion-toggle {
  min-height: 0 !important;
  padding: 8px 44px 8px 14px !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body p,
.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body li,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body p,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body li {
  font-size: 15px !important;
  line-height: 1.32 !important;
}

.main-content .page-results-group .results-by-option-category .panel.panel-default > .panel-heading *,
.main-content .results-summary-page .results-by-option-category .panel.panel-default > .panel-heading * {
  color: #18324A !important;
  text-shadow: none !important;
  opacity: 1 !important;
}


/* ROUNDTABLE MOU EXTRA-COMPACT V4 */

/* Pull the three-column voting workspace closer to the fixed header. */
@media (min-width: 992px) {
  .main-content:has(.page-voting-option-category) {
    margin-top: 28px !important;
  }
}

/* Fit more section links in the left navigation. */
.main-content .fixed-left-column .nav-item-container a,
.main-content .fixed-left-column .navigation-group > a,
.main-content .side-drawer .nav-item-container a,
.main-content .side-drawer .navigation-group > a {
  padding: 8px 14px !important;
  line-height: 1.22 !important;
}

.main-content .fixed-left-column .list-group-item,
.main-content .side-drawer .list-group-item {
  margin-bottom: 0 !important;
}

/* Tighten the section intro and each clause card further. */
.main-content .page-voting-option-category h1.main,
.main-content .page-voting-option-category #page-header {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse,
.main-content .page-voting-option-category .bootstrap-collapse.panel {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .panel-heading .expansion-toggle,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .panel-heading .expansion-toggle {
  min-height: 0 !important;
  padding: 6px 40px 6px 12px !important;
}

.main-content .page-voting-option-category .bootstrap-collapse-heading .panel-slider__title,
.main-content .page-voting-option-category .bootstrap-collapse-heading .panel-slider__title .float-left {
  font-size: 16px !important;
  line-height: 1.18 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapsing > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapsing > .panel-body {
  padding: 8px 12px !important;
  font-size: 14px !important;
  line-height: 1.24 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body p,
.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body li,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body p,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body li {
  font-size: 14px !important;
  line-height: 1.24 !important;
}

.main-content .page-voting-option-category .panel-body p,
.main-content .page-voting-option-category .panel-body p + p {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.main-content .page-voting-option-category .option-description,
.main-content .page-voting-option-category .criterion-description {
  margin-bottom: 3px !important;
}

.main-content .page-voting-option-category .likert-container {
  margin: 0 !important;
  padding: 0 8px !important;
}

.main-content .page-voting-option-category .ethelo-likert-group {
  margin-top: 2px !important;
  margin-bottom: 3px !important;
}

.main-content .page-voting-option-category .ethelo-likert-subtext {
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.main-content .page-voting-option-category .panel-bottom {
  margin-top: 3px !important;
  padding-top: 2px !important;
  padding-bottom: 0 !important;
}

/* Remove the legacy 40px comment-instruction gap. */
.main-content .page-voting-option-category .new-comment .instruct,
.main-content .page-voting-option-category .panel-bottom .instruct {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.main-content .page-voting-option-category .panel-bottom .comment-title {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.main-content .page-voting-option-category .new-comment,
.main-content .page-voting-option-category .new-comment-container,
.main-content .page-voting-option-category .form-comment-container-outer,
.main-content .page-voting-option-category .form-comment-container-inner,
.main-content .page-voting-option-category .form-comment {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .new-comment textarea.form-control,
.main-content .page-voting-option-category textarea.ember-text-area.form-control {
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px !important;
}

/* Make the selected vote unmistakable with an independent solid centre dot. */
@media (min-width: 992px) {
  .main-content .page-voting-option-category a.ethelo-likert-button.btn {
    overflow: visible !important;
  }

  .main-content .page-voting-option-category .ethelo-likert-button-container.active
    > a.ethelo-likert-button.btn::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #C15800 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 2px #9F3F00 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  .main-content .page-voting-option-category .ethelo-likert-button-container.active
    > a.ethelo-likert-button.btn
    .ethelo-likert-indicator {
    visibility: hidden !important;
  }
}

/* Pull the personal-results panel closer to NEXT and compact its rows. */
.main-content .fixed-right-column .right-sidebar__top + .right-sidebar__bottom {
  margin-top: 10px !important;
}

.main-content .right-sidebar #participant-results h2,
.main-content .right-sidebar #participant-results h3 {
  margin: 0 !important;
  padding: 9px 8px 4px !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
}

.main-content .right-sidebar #participant-results.panel-body p {
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.main-content .right-sidebar #participant-results .option,
.main-content .right-sidebar .participant-results-option {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.main-content .right-sidebar #participant-results .option-category,
.main-content .right-sidebar #participant-results .option-category-title {
  margin: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 3px !important;
}

/* ROUNDTABLE MOU FINAL SPACING V5 */

/* Leave only a very small gap below the comment box and clause card. */
.main-content .page-voting-option-category .panel-bottom,
.main-content .page-voting-option-category .new-comment,
.main-content .page-voting-option-category .new-comment-container,
.main-content .page-voting-option-category .form-comment-container-outer,
.main-content .page-voting-option-category .form-comment-container-inner,
.main-content .page-voting-option-category .form-comment {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .panel-bottom .list-group-item,
.main-content .page-voting-option-category .list-group-item.new-comment-container {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .new-comment textarea.form-control,
.main-content .page-voting-option-category textarea.ember-text-area.form-control {
  margin-bottom: 0 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body {
  padding-bottom: 4px !important;
}

/* Remove reserved space below NEXT before the personal-results panel. */
.main-content .fixed-right-column .right-sidebar__top {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

.main-content .fixed-right-column .right-sidebar__top .navigation-button,
.main-content .fixed-right-column .right-sidebar__top .ember-view {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .fixed-right-column .right-sidebar__top + .right-sidebar__bottom,
.main-content .fixed-right-column .right-sidebar__bottom {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ROUNDTABLE MOU FINAL MICRO-SPACING V7 */

/* Remove the legacy 60px list margin below the comment textarea. */
.main-content .page-voting-option-category .panel-bottom .list-group.comments,
.main-content .page-voting-option-category .panel-bottom ul.list-group,
.main-content .page-voting-option-category .list-group.comments {
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .panel-bottom,
.main-content .page-voting-option-category .new-comment,
.main-content .page-voting-option-category .new-comment-container,
.main-content .page-voting-option-category .form-comment-container-outer,
.main-content .page-voting-option-category .form-comment-container-inner,
.main-content .page-voting-option-category .form-comment {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .page-voting-option-category .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .page-voting-option-category .bootstrap-collapse.panel > .collapse > .panel-body {
  padding-bottom: 2px !important;
}

/* Restore comfortable padding around NEXT. */
.main-content .fixed-right-column .right-sidebar__top .navigation-button,
.main-content .fixed-right-column .right-sidebar__top .btn.navigation-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 32px !important;
  line-height: 1.2 !important;
}

/* Collapse the right-sidebar top region to the button's actual height. */
@media (min-width: 992px) {
  .main-content .fixed-right-column .right-sidebar__top {
    display: block !important;
    flex: 0 0 42px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .main-content .fixed-right-column .right-sidebar__top > .ember-view {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-content .fixed-right-column .right-sidebar__bottom,
  .main-content .fixed-right-column .right-sidebar__top + .right-sidebar__bottom,
  .main-content .fixed-right-column .right-sidebar__bottom > .bootstrap-accordion:first-child,
  .main-content .fixed-right-column .right-sidebar__bottom > .panel:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* PUBLIC POLICY LAB PAGE REFINEMENTS V2 */

/* Pull the voting workspace closer to the fixed header. */
@media (min-width: 992px) {
  .main-content:has(.voting-option-page) {
    margin-top: 16px !important;
  }
}

.main-content .page-voting-option h1.main,
.main-content .page-voting-option #page-header {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  line-height: 1.1 !important;
}

/* The page image/content wrapper should not create a second large gap. */
.main-content .page-voting-option .panel.bootstrap-collapse[id^="center-page-"],
.main-content .page-voting-option .bootstrap-collapse.panel[id^="center-page-"] {
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}

.main-content .page-voting-option .panel.bootstrap-collapse[id^="center-page-"] > .collapse > .panel-body,
.main-content .page-voting-option .bootstrap-collapse.panel[id^="center-page-"] > .collapse > .panel-body {
  padding-top: 0 !important;
  padding-bottom: 4px !important;
}

/* Remove the empty spacer heading inserted immediately after the hero image. */
.main-content .page-voting-option
  .panel.bootstrap-collapse[id^="center-page-"]
  p[style*="text-align:center"] + h2:first-of-type,
.main-content .page-voting-option
  .bootstrap-collapse.panel[id^="center-page-"]
  p[style*="text-align:center"] + h2:first-of-type {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.main-content .page-voting-option
  .panel.bootstrap-collapse[id^="center-page-"] h2,
.main-content .page-voting-option
  .bootstrap-collapse.panel[id^="center-page-"] h2 {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

/* Empty sidebar top slots should not reserve NEXT-button space. */
@media (min-width: 992px) {
  .main-content:has(.voting-option-page) .fixed-right-column
    .right-sidebar__top:has(> .ember-view:empty) {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .main-content:has(.voting-option-page) .fixed-right-column
    .right-sidebar__top:has(> .ember-view:empty) + .right-sidebar__bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Keep completion checks inside the active menu row and vertically centered. */
.main-content .menu-index .nav-item > a {
  position: relative !important;
  padding-right: 40px !important;
}

.main-content .menu-index .nav-item > a .material-icons-outlined.full-complete,
.main-content .menu-index .nav-item > a .material-icons-outlined.half-complete,
.main-content .menu-index .nav-item > a .material-icons.full-complete,
.main-content .menu-index .nav-item > a .material-icons.half-complete {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #208046 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Compact criterion cards and comments for the page-voting-option template. */
.main-content .page-voting-option .panel.bootstrap-collapse,
.main-content .page-voting-option .bootstrap-collapse.panel {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.main-content .page-voting-option .panel.bootstrap-collapse > .panel-heading .expansion-toggle,
.main-content .page-voting-option .bootstrap-collapse.panel > .panel-heading .expansion-toggle {
  min-height: 0 !important;
  padding: 8px 42px 8px 14px !important;
}

.main-content .page-voting-option .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content .page-voting-option .bootstrap-collapse.panel > .collapse > .panel-body {
  padding: 10px 14px 3px !important;
}

.main-content .page-voting-option .likert-container {
  margin: 0 !important;
  padding: 2px 10px !important;
}

.main-content .page-voting-option .ethelo-likert-group {
  margin-top: 4px !important;
  margin-bottom: 5px !important;
}

.main-content .page-voting-option .panel-bottom {
  min-height: 0 !important;
  margin: 4px 0 0 !important;
  padding: 2px 0 0 !important;
}

.main-content .page-voting-option .panel-bottom .instruct {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* Remove the composer avatar and let the textarea use the full row. */
.main-content .page-voting-option .panel-bottom
  .new-comment .form-comment-container-outer > .row-picture {
  display: none !important;
}

.main-content .page-voting-option .panel-bottom .new-comment .form-comment-container-inner,
.main-content .page-voting-option .panel-bottom .new-comment .form-comment-container-inner .form-comment,
.main-content .page-voting-option .panel-bottom .new-comment .form-comment-container-inner .form-group {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-content .page-voting-option .panel-bottom .new-comment textarea.form-control,
.main-content .page-voting-option .panel-bottom textarea.ember-text-area.form-control {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 8px !important;
}

.main-content .page-voting-option .panel-bottom .list-group.comments,
.main-content .page-voting-option .panel-bottom ul.list-group,
.main-content .page-voting-option .panel-bottom .new-comment,
.main-content .page-voting-option .panel-bottom .new-comment-container,
.main-content .page-voting-option .panel-bottom .form-comment-container-outer,
.main-content .page-voting-option .panel-bottom .form-comment-container-inner,
.main-content .page-voting-option .panel-bottom .form-comment {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Draw an unmistakable selection dot independent of Ethelo's star indicator. */
@media (min-width: 992px) {
  .main-content .page-voting-option a.ethelo-likert-button.btn {
    position: relative !important;
    overflow: visible !important;
  }

  .main-content .page-voting-option .ethelo-likert-button-container.active
    > a.ethelo-likert-button.btn::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    left: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #C15800 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 3px #792C00 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

  .main-content .page-voting-option .ethelo-likert-button-container.active
    > a.ethelo-likert-button.btn .ethelo-likert-indicator {
    visibility: hidden !important;
  }
}


/* PUBLIC POLICY LAB FIXED-HEADER CLEARANCE V3 */

/* Restore Ethelo's required desktop clearance below the fixed navbar. */
@media (min-width: 992px) {
  .main-content:has(.voting-option-page) {
    margin-top: 60px !important;
  }
}


/* PUBLIC POLICY LAB TEMPLATE-SPECIFIC SPACING V4 */

/* Do not rely on the global main-content margin for this page template. */
@media (min-width: 992px) {
  .main-content:has(.voting-option-page) {
    margin-top: 60px !important;
  }

  /* Give Housing/Easy Wins columns explicit clearance below the navbar. */
  .main-content .voting-option-page #toc-col .fixed-left-group {
    margin-top: 20px !important;
  }

  .main-content .voting-option-page .page-voting-option #main-block-center {
    padding-top: 20px !important;
  }

  .main-content:has(.voting-option-page) .fixed-right-column
    .right-sidebar__top:has(> .ember-view:empty) + .right-sidebar__bottom,
  .main-content .voting-option-page .fixed-right-column .right-sidebar__bottom {
    margin-top: 20px !important;
  }
}

/* Remove the legacy 60px tail beneath inline comment forms on any page type,
   while leaving the Feedback modal untouched. */
.main-content .list-group.comments:not(.modal .list-group.comments) {
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}

.main-content .list-group.comments:not(.modal .list-group.comments)
  .list-group-item.new-comment-container,
.main-content .list-group.comments:not(.modal .list-group.comments)
  .new-comment,
.main-content .list-group.comments:not(.modal .list-group.comments)
  .form-comment-container-outer,
.main-content .list-group.comments:not(.modal .list-group.comments)
  .form-comment-container-inner,
.main-content .list-group.comments:not(.modal .list-group.comments)
  .form-comment {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep only a small internal tail below inline textareas. */
.main-content .list-group.comments:not(.modal .list-group.comments)
  textarea.form-control,
.main-content .list-group.comments:not(.modal .list-group.comments)
  textarea.ember-text-area.form-control {
  margin-bottom: 0 !important;
}

.main-content #page-comments-position-center
  .panel.bootstrap-collapse > .collapse > .panel-body,
.main-content #page-comments-position-center
  .bootstrap-collapse.panel > .collapse > .panel-body {
  padding-bottom: 4px !important;
}


/* POLICY LAB ICON AND WELCOME ALIGNMENT V2 */

/* Align untouched-page hollow circles with complete and partial indicators. */
.main-content .menu-index .nav-item > a .material-icons-outlined.incomplete,
.main-content .menu-index .nav-item > a .material-icons.incomplete {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #7a8791 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Welcome's center title and right-side NEXT sat slightly above other pages. */
@media (min-width: 992px) {
  .main-content .info-page#page-welcome #main-block-center {
    box-sizing: border-box !important;
    padding-top: 8px !important;
  }

  .main-content .info-page#page-welcome .fixed-right-column .right-sidebar__top {
    margin-top: 8px !important;
  }
}


/* POWERED BY POLITY FOOTER LOGO V3 */

/* Replace Ethelo's footer mark with the supplied Powered by Polity image. */
.main-content .copyright,
.main-content .fixed-left-group__btm .copyright,
.main-content .side-drawer .copyright {
  display: block !important;
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
  width: 185px !important;
  max-width: calc(100% - 28px) !important;
  height: 29px !important;
  min-height: 29px !important;
  margin: 0 0 0 14px !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
  background-image: url("https://ethelo.net/decision-images/QkFoN0Iwa2lCMmxrQmpvR1JWUnBBdFFUU1NJTWRtRnlhV0Z1ZEFZN0FGUkpJZ2h0YVdRR093QkctLTJlNjIwMjljZDQwNzcyMzI1NGM0OGY0ODJkYjMyODE3ZjVkYzAzOTI/mid") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}


/* REMOVE FOOTER LOGO V4 */
.main-content .copyright,
.main-content .fixed-left-group__btm .copyright,
.main-content .side-drawer .copyright {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image: none !important;
}


/* RESOURCE LINKS SIDEBAR HIGHLIGHT V5 */

/* Pink Resource Links card, limited to pages configured with sidebar_top. */
.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child {
  background: #f8eef2 !important;
  border: 1px solid #dfbdcb !important;
  border-radius: 9px !important;
  box-shadow: 0 3px 0 rgba(120, 54, 74, 0.12) !important;
  overflow: hidden !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading {
  background: #ead2dc !important;
  border: 0 !important;
  border-left: 5px solid #c83b2f !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .float-left,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .float-left,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .float-left,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .float-left {
  color: #a22f2a !important;
  font-weight: 800 !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .material-icons,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .material-icons,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .material-icons,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child > .panel-heading .material-icons {
  color: #a22f2a !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body {
  background: #f8eef2 !important;
  color: #3f2630 !important;
  border-top: 1px solid #dfbdcb !important;
  padding: 12px 14px !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a {
  color: #8f2d2a !important;
  font-weight: 650 !important;
  text-decoration-color: rgba(143, 45, 42, 0.45) !important;
}

.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:hover,
.main-content #page-welcome .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:focus,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:hover,
.main-content #page-community-resilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:focus,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:hover,
.main-content #page-communityresilience .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:focus,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:hover,
.main-content #page-policyinfrastructure .right-sidebar__bottom > .bootstrap-accordion:first-child .panel-body a:focus {
  color: #641f1d !important;
  text-decoration: underline !important;
}


/* COMMENT ACTION MENU LAYERING FIX V1 */

/* Let the cog dropdown extend over the next panel/comment instead of being clipped. */
.main-content .comment-list,
.main-content .comments,
.main-content .comment-item-container,
.main-content .comment-item,
.main-content .comment-item .row-content,
.main-content .comment-item .more-actions.dropdown {
  overflow: visible !important;
}

.main-content .comment-item-container,
.main-content .comment-item {
  position: relative !important;
}

.main-content .comment-item .more-actions.dropdown {
  z-index: 2000 !important;
}

.main-content .comment-item .more-actions.dropdown.open,
.main-content .comment-item .more-actions.dropdown:focus-within,
.main-content .comment-item .more-actions.dropdown:hover {
  z-index: 3000 !important;
}

.main-content .comment-item .more-actions.dropdown .dropdown-menu {
  z-index: 3100 !important;
}


/* COMMENT ACTION MENU LAYERING FIX V2 */

/* The dropdown can extend below its comment panel; keep that whole panel above the next criterion panel. */
.main-content .panel.bootstrap-collapse,
.main-content .bootstrap-collapse.panel {
  position: relative !important;
  z-index: 1 !important;
}

.main-content .panel.bootstrap-collapse:has(.comment-list),
.main-content .bootstrap-collapse.panel:has(.comment-list),
.main-content .panel.bootstrap-collapse:has(.list-group.comments),
.main-content .bootstrap-collapse.panel:has(.list-group.comments) {
  overflow: visible !important;
  z-index: 2000 !important;
}

.main-content .panel.bootstrap-collapse:has(.more-actions.dropdown.open),
.main-content .bootstrap-collapse.panel:has(.more-actions.dropdown.open),
.main-content .panel.bootstrap-collapse:has(.more-actions.dropdown [aria-expanded="true"]),
.main-content .bootstrap-collapse.panel:has(.more-actions.dropdown [aria-expanded="true"]),
.main-content .panel.bootstrap-collapse:has(.more-actions.dropdown:focus-within),
.main-content .bootstrap-collapse.panel:has(.more-actions.dropdown:focus-within),
.main-content .panel.bootstrap-collapse:has(.more-actions.dropdown:hover),
.main-content .bootstrap-collapse.panel:has(.more-actions.dropdown:hover) {
  z-index: 10000 !important;
}

.main-content .panel.bootstrap-collapse:has(.comment-list) > .collapse,
.main-content .bootstrap-collapse.panel:has(.comment-list) > .collapse,
.main-content .panel.bootstrap-collapse:has(.comment-list) > .collapse > .panel-body,
.main-content .bootstrap-collapse.panel:has(.comment-list) > .collapse > .panel-body,
.main-content .panel.bootstrap-collapse:has(.list-group.comments) > .collapse,
.main-content .bootstrap-collapse.panel:has(.list-group.comments) > .collapse,
.main-content .panel.bootstrap-collapse:has(.list-group.comments) > .collapse > .panel-body,
.main-content .bootstrap-collapse.panel:has(.list-group.comments) > .collapse > .panel-body {
  overflow: visible !important;
}


/* NAV AND DESCRIPTION LAYOUT CORRECTIONS V1 */

/* Early Wins is a navigation group label, not an emphasis phrase. */
.main-content #desktoppage-early-wins-panel-parent > a[data-toggle="collapse"],
.main-content #mobilepage-early-wins-panel-parent > a[data-toggle="collapse"] {
  font-style: normal !important;
}

/* Keep the three top description boxes as 2-up + 1-full on desktop. */
@media (min-width: 768px) {
  .main-content section[aria-label$="summary"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .main-content section[aria-label$="summary"] > article:nth-of-type(1),
  .main-content section[aria-label$="summary"] > article:nth-of-type(2) {
    box-sizing: border-box !important;
    flex: 0 0 calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
    max-width: calc(50% - 9px) !important;
  }

  .main-content section[aria-label$="summary"] > article:nth-of-type(1) {
    margin-right: 18px !important;
  }

  .main-content section[aria-label$="summary"] > article:nth-of-type(2) {
    margin-right: 0 !important;
  }

  .main-content section[aria-label$="summary"] > article:nth-of-type(3) {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Stack the top description boxes only on small screens. */
@media (max-width: 767px) {
  .main-content section[aria-label$="summary"] > article {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}


/* NAV AND DESCRIPTION LAYOUT CORRECTIONS V2 */

/* Override the broad navigation-group italic rule for Early Wins in both nav shells. */
#desktoppage-early-wins-panel-parent,
#desktoppage-early-wins-panel-parent *,
#mobilepage-early-wins-panel-parent,
#mobilepage-early-wins-panel-parent *,
.main-content #desktoppage-early-wins-panel-parent,
.main-content #desktoppage-early-wins-panel-parent *,
.main-content #mobilepage-early-wins-panel-parent,
.main-content #mobilepage-early-wins-panel-parent * {
  font-style: normal !important;
}

/* Use the summary section's actual available width, not the browser width, for stacking. */
@supports (container-type: inline-size) {
  .main-content section[aria-label$="summary"] {
    
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .main-content section[aria-label$="summary"] > article {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  
}

/* Fallback for older browsers without container queries: stack through tablet widths. */
@supports not (container-type: inline-size) {
  @media (max-width: 1199px) {
    .main-content section[aria-label$="summary"] > article {
      box-sizing: border-box !important;
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }
  }
}