/* content-accordion */
.ckeditor-accordion-container {
  --accordion-bg: var(--clr-white);
  --hover-bg: var(--clr-primary);
  --border-clr: var(--clr-gray-dark);
  --title-x-space: 20px;
  --title-clr: var(--clr-primary-2);
  background-color: transparent;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.ckeditor-accordion-container:has(.popup-component.is-active) {
  z-index: unset;
}

.ckeditor-accordion-container:not(:last-child) {
  margin-bottom: calc(var(--sp12_5) + 2px);
}

.accordion-caption.styled,
.accordion-styled.ckeditor-accordion-container {
  margin-left: var(--accordion-margin);
  margin-right: var(--accordion-margin);
  width: calc(100% + var(--threshold-width));
}

.accordion-caption {
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
  color: var(--clr-blue);
}

.accordion-caption,
.body-text-field .accordion-caption {
  margin-bottom: var(--sp7);
}

*:not(.ckeditor-accordion-container):has(+.accordion-caption) {
  --body-texts-vr-gap: calc(var(--sp10_5) - 2px);
}

.normal-content-module .content-title-wrap:has(.accordion-styled) {
  overflow: unset;
}

.ckeditor-accordion-container>dl {
  padding: calc(var(--sp19) + 10px) var(--sp9) var(--sp12) var(--sp9);
  background-color: var(--accordion-bg);
  overflow: hidden;
  box-shadow: 0 0 28px 0px rgba(0, 0, 0, 0.2);
}

.ckeditor-accordion-container>dl dt:before {
  display: none;
}

.ckeditor-accordion-container>dl dt>a:not(.button),
.ckeditor-accordion-container>dl dt>a {
  border-bottom: 1px solid var(--border-clr);
  font-size: var(--fs-24);
  font-weight: var(--fw-normal);
  color: var(--title-clr);
  padding: 37px 50px 37px 0;
  padding-left: calc(var(--icon-width) + var(--title-x-space) + var(--icon-text-gap)) !important;
}

.ckeditor-accordion-container>dl dt:first-child>a {
  border-top: 1px solid var(--border-clr);
}

.ckeditor-accordion-container>dl dd:not(:last-child) {
  border-bottom: 1px solid var(--border-clr);
}

.ckeditor-accordion-container>dl dt:hover>a:not(.button),
.ckeditor-accordion-container>dl dt.active>a:not(.button),
.ckeditor-accordion-container>dl dt:hover>a,
.ckeditor-accordion-container>dl dt.active>a {
  background: var(--hover-bg) !important;
}

/* arrow */
.ckeditor-accordion-container>dl dt>a>.ckeditor-accordion-toggle {
  width: 22px;
  height: 12px;
  margin-top: -5px;
  background: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/accordian_down_default__.svg) no-repeat center center transparent;
}

.ckeditor-accordion-container>dl dt:hover>a>.ckeditor-accordion-toggle {
  background-image: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/accordian_down_hover.svg);
  filter: brightness(100);
}

.ckeditor-accordion-container>dl dt.active>a>.ckeditor-accordion-toggle {
  background-image: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/accordian_upward_default_.svg);
}

/* styles override */
dd:has(>.tbl-theme-default:first-child) {
  padding-top: 0;
}

dd:has(>.tbl-theme-default:last-child) {
  padding-bottom: 0;
}

dd h2 {
  font-weight: var(--fw-bold);
  --body-texts-vr-gap: calc(var(--sp8) - 4px);
}

/* icons */
.dt-with-icon {
  --icon-text-gap: 30px;
}

.dt-with-icon .ckeditor-accordion-toggler:before {
  left: var(--title-x-space);
}

.ckeditor-accordion-container>dl dt>a>.ckeditor-accordion-toggle {
  right: var(--title-x-space);
}

.dt-with-icon .ckeditor-accordion-toggler:before {
  background-image: var(--icon-src);
}

.dt-with-icon.active .ckeditor-accordion-toggler:before,
.dt-with-icon .ckeditor-accordion-toggler:hover:before {
  background-image: var(--icon-on-hover-src);
}

.dt-with-icon {
  --icon-height: 61px;
  --icon-width: 61px;
}

.dt-with-icon.demographics-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Demographic.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Demographic_hover.svg);
}

.dt-with-icon.determinants-risks-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_Determinats.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_Determinats_hover.svg);
}

.dt-with-icon.health-service-coverage-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_service.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_service_hover.svg);
}

.dt-with-icon.health-outcome-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_Outcome.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Adolescent_Health_Outcome_hover.svg);
  --icon-height: 63px;
}

.dt-with-icon.multi-sectoral-guidance-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Comprehensive_Adolescent_Health_Framework.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Comprehensive_Adolescent_Health_Framework_hover.svg);
}

.dt-with-icon.monitoring-frameworks-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Measurement_Indicators_monitoring.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Measurement_Indicators_monitoring_hover.svg);
  --icon-height: 61px;
  --icon-width: 61px;
}

.dt-with-icon.service-delivery-standards-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Quality_of_care_and_health.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Quality_of_care_and_health_hover.svg);
}

.dt-with-icon.health-gender-education-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/sexual_and_reproductive_health.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/sexual_and_reproductive_health_hover.svg);
  --icon-height: 67px;
}

.dt-with-icon.well-being-tools-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Mental_health_and_psychosocial.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Mental_health_and_psychosocial_hover.svg);
}

.dt-with-icon.innovation-frame-works-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Digital_health.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/Digital_health_hover.svg);
}

/* mnch */
.dt-with-icon.maternal-moratality--icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/Maternal_mortality.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/Maternal_mortality_hover.svg);
}

.dt-with-icon.integrated-assessment-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/An-integrated-assessment-of-progress-n-maternal.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/An-integrated-assessment-of-progress-n-maternal_hover.svg);
}

.dt-with-icon.child-moratality-trends-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/child_mortality_trends.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/child_mortality_trends_hover.svg);
}

.dt-with-icon.stunning-among-children-icon {
  --icon-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/Stunting-among-children-under-5_1.svg);
  --icon-on-hover-src: url(/themes/custom/gff/components/redesign/layouts/content-accordion/img/set2/Stunting-among-children-under-5_hover.svg);
}

/* general notes */
dt:has(+.general-notes-text) {
  display: none;
}

.ckeditor-accordion-container>dl .general-notes-text {
  --icons-width: 61px;
  --icon-text-gap: 30px;
  display: block;
  padding: calc(var(--sp11) - 5px) calc(var(--icons-width) + var(--title-x-space) + var(--icon-text-gap));
}


/* accordion-theme-2 */
.ckeditor-accordion-container .accordion-theme-2 dd {
  --icon-height: 61px;
  --icon-width: 61px;
  --icon-text-gap: 30px;
  --hr-padding: calc(var(--icon-width) + var(--title-x-space) + var(--icon-text-gap));
  background: #f9f9f9;
  padding: 0 var(--hr-padding) var(--sp11) var(--hr-padding);
}

.ckeditor-accordion-container .accordion-theme-2 dd.active {
  border: none !important;
}

.accordion-theme-2 dd>*:first-child {
  padding-top: var(--sp11);
}