/**********************

logic-model-responses styles

***********************/
.logical-response-section {
  --section-primary-clr: #298980;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.logical-response-box {
  --border-clr: var(--clr-blue-gray-300);
}

.logical-model-results-title {
  border-bottom: 1px solid var(--border-clr);
  margin-bottom: 8px;
  padding-bottom: 14px;
}

.logical-model-results-title .note-info-field {
  top: 0px;
}

/*************content section ************/

.logical-response-content-wrap {
  max-height: 450px;
  overflow: auto;
  padding-right: 0;
}

.logical-response-content-wrap.no-scroll-y {
  overflow-y: hidden;
}

.logical-response-content-wrap.is-scrollable-x>*:last-child {
  padding-bottom: 15px;
}

.logical-response-content-wrap.is-scrollable {
  width: calc(100% + var(--col-padding));
  padding-right: var(--col-padding);
}

.logical-response-sub-item {
  width: 100%;
  padding: var(--sp11) 0 var(--sp6) 0;
  border-bottom: 1px solid var(--border-clr);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-weight: var(--fw-normal);
  color: var(--clr-gray-dark);
  font-size: var(--fs-14);
}

.logical-response-sub-item:first-child {
  padding-top: var(--sp6);
}

.logical-response-sub-item:last-child {
  border: none;
  padding-bottom: 0;
}

.logical-response-sub-item .right-field,
.logical-response-sub-item .left-field {
  width: 50%;
}

.logical-response-sub-item .left-field {
  padding-right: 30px;
}

.logical-subindicators-title {
  line-height: 1.4285;
}

.logical-response-sub-item .external-links-list {
  margin-top: var(--sp6) !important;
}

/********progress*********/
.logical-response-content {
  --progress-bg: #298980;
  --progress-bg2: #cae6e9;
}

.progress-chart-main {
  padding-left: 20px;
  position: relative;
}

.progress-chart {
  position: relative;
}

.progress-chart:not(:last-child) {
  margin-bottom: 10px;
}

.progress-chart-inner {
  display: flex;
  width: 100%;
}

.progress-chart-inner .item-label {
  width: 35px;
  text-align: right;
  margin-right: 7px;
  line-height: 1;
  font-family: var(--secondary-ff);
}

.progress-wrap {
  width: calc(100% - 62px);
  position: relative;
  height: 14px;
}

.progress-field {
  width: 0;
  position: absolute;
  height: 100%;
  background: var(--progress-bg2);
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.progress-field-2 {
  background: var(--progress-bg);
}

.progress-field-2.have-tooltip:hover {
  background: rgba(12, 113, 107, 0.8);
}

.progress-field .progress-data-label {
  color: var(--clr-white);
  line-height: 1;
  position: relative;
  font-family: var(--secondary-ff);
}

.progress-field-1>.progress-data-label {
  color: var(--clr-gray-dark);
  position: absolute;
  left: 100%;
  margin-left: 4px;
  height: 17px;
  display: flex;
  align-items: center;
}

.logical-chart-field .note-section {
  padding-left: 45px;
  margin-top: 3px;
  font-size: var(--fs-12);
  font-style: italic;
  width: 100%;
}

.progress-chart .staus-field {
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -5px;
}

.progress-chart .staus-field-inner {
  width: 12px;
  height: 10px;
  display: none;
  background: none no-repeat center center transparent;
}

.value-increased .staus-field-inner {
  display: block;
  background-image: url(/themes/custom/gff/components/home/logic-model-responses/css/../img/green_trangle_indicator.svg);
}

.value-decreased .staus-field-inner {
  display: block;
  background-image: url(/themes/custom/gff/components/home/logic-model-responses/css/../img/red_triangle_indicator.svg);
}

/* new styles for kpi*/

.progress-bar-component {
  --label-width: 255px;
  --label-bar-gap: 10px;
  --bar-height: 18px;
  --label-clr: var(--clr-white);
}

.progress-bar-component .progress-chart-inner {
  display: grid;
  grid-template-columns: var(--label-width) 1fr;
  grid-gap: var(--label-bar-gap);
  align-items: center;
}

.progress-bar-component .progress-chart-main {
  padding-left: 0;
}

.progress-bar-component .item-unit,
.progress-bar-component .item-label {
  width: auto;
  margin: 0;
  align-items: center;
  font-size: var(--fs-14);
  color: var(--clr-gray-dark);
  line-height: 1.2857142857;
  font-family: var(--primary-ff);
  font-weight: var(--fw-normal);
}

.progress-bar-component .progress-wrap {
  width: auto;
  height: var(--bar-height);
}

.progress-bar-component .progress-data-label {
  color: var(--label-clr);
}

.progress-bar__label-dark {
  --label-clr: var(--clr-gray-dark);
}

.progress-bar__outer {
  --bar-bg: var(--progress-bg2);
}

.progress-bar-component .progress-field {
  background: var(--bar-bg);
}

.progress-bar-component .progress-field+.progress-field {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.legend-section+.logical-response-content-wrap {
  margin-top: 35px;
}

.no-legends .logical-response-content-wrap {
  margin-top: 35px;
}

.progress-bar__type-1 {
  display: grid;
  grid-gap: 25px 0;
}

/* progress-bar__type-2 : grouped style */
.progress-bar__group-name-field {
  display: flex;
}

.progress-bar__group-name {
  color: var(--section-primary-clr);
  border: 1px solid var(--section-primary-clr);
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: var(--fw-bold);
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  display: flex;
  align-items: center;
}

.progress-bar__group {
  --group-name-width: 80px;
  --name-content-gap: 20px;
  --label-bar-gap: 0;
  --label-width: 230px;
  --unit-width: 120px;
}

.progress-bar__group-item {
  display: grid;
  grid-template-columns: var(--group-name-width) 1fr;
  align-items: center;
  grid-gap: var(--name-content-gap);
  padding: 25px 0;
  position: relative;
}

.progress-bar__group-item:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: calc(var(--group-name-width) + var(--label-width) + var(--name-content-gap));
  background: var(--border-clr);
}

.progress-bar__group-item:after {
  content: "";
  position: absolute;
  left: calc(var(--group-name-width) + var(--label-width) + var(--name-content-gap));
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--border-clr);
}

.progress-bar__type-2 .progress-wrap {
  padding: 0 5px 0 10px;
}

.progress-bar__type-2 .progress-chart-inner {
  grid-template-columns: var(--label-width) 1fr var(--unit-width);
  min-height: 36px;
}

.progress-bar__type-2 .item-label {
  padding-right: 15px;
}

/*********legend***************/
.no-legends .legend-section {
  display: none !important;
}

.logical-response-content .legend-section {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
  line-height: 1;
  color: var(--clr-gray-dark);
}

.logical-response-content .legend-section ul {
  display: flex;
  gap: 20px;
}

.logical-response-content .legend-section li {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
}

.logical-response-content .legend-symbol {
  width: 11px;
  height: 11px;
  background: var(--symbol-clr, var(--progress-bg));
  display: block;
  border-radius: 0;
  flex-shrink: 0;
}

.legend-item-reverse li {
  flex-direction: row-reverse;
}

/***********tooltip*********/

.progress-chart .tooltip-block {
  /*position: absolute;*/
  position: fixed;
  top: 50%;
  /*transform: translateY(-50%);*/
  left: 0;
  /*right: 100%;*/
  width: auto;
  min-width: 200px;
  margin-right: 10px;
  display: none;
  /*box-shadow: 1px 0 28px 0px rgba(0, 0, 0, 0.2);*/
  z-index: 1;
  transform: none !important;
  opacity: 0;
}

.progress-chart .tooltip-block:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -4.5px;
  margin-left: -1px;
  display: block;
  width: 4px;
  height: 9px;
  background: url(/themes/custom/gff/components/home/logic-model-responses/css/../img/tooltip-arrow.png) no-repeat center center transparent;
}

.progress-chart .tooltip-inner {
  max-width: none;
  width: 100%;
  padding: 15px;
  color: #ffffff;
  text-align: left;
  background-color: #ffffff;
  color: #4d4d4d;
  font-size: 12px;
  line-height: 15px;
  overflow: unset;
  border: 1px solid #e6e7e8;
}

.progress-chart .tooltip-block.open,
.is-desktop-device .progress-chart .have-tooltipz:hover .tooltip-block {
  display: block;
}

.progress-chart .tooltip-block.is-visible {
  opacity: 1;
}

.progress-chart .have-tooltip {
  cursor: pointer;
}

.progress-chart .tooltip-inner ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.progress-chart .tooltip-inner li {
  width: 100% !important;
  margin-right: 20px;
  padding-bottom: 5px;
  font-size: 12px;
  line-height: 15px;
  margin-right: 0px !important;
}

.progress-chart .tooltip-inner li:last-child {
  padding-bottom: 0;
}

/*.charts-0-0 .tooltip-block {
  top: 100%;
  transform: translateY(-50px);
}
.charts-0-0 .tooltip-block:after {
  top: 41.5px;
}
.chart-last-item .tooltip-block {
  top: auto;
  transform: none !important;
  bottom: -50px;
}
.chart-last-item .tooltip-block:after {
  bottom: 58.5px;
  margin: 0 0 -4.5px 1px;
  top: auto;
}*/

.progress-chart .tooltip-block.col-2-layout {
  min-width: 400px;
}

.progress-chart .tooltip-block.col-3-layout {
  min-width: 450px;
}

.progress-chart .tooltip-block.col-4-layout {
  min-width: 600px;
}

.progress-chart .tooltip-block.col-5-layout {
  min-width: 600px;
}

.grouping-wrap {
  display: flex;
}

.grouping-wrap>.grouping:not(:last-child) {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid #e6e7e8;
}

.grouping-wrap>.grouping ul {
  max-width: 150px;
}

.grouping-wrap-outer .tooltip-title-label {
  width: 100%;
  margin: 0 0 10px 0;
  color: #1fa29c;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #e6e7e8;
  padding-bottom: 5px;
}

/* notes link */
.logical-response-item .foot-note-content {
  margin-top: 15px;
}

.logical-response-item .footnotes ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

/* logical-model-filter-btn */
.logical-model-filter-btn {
  display: none;
  margin-bottom: 10px;
}