.ProjectsListing .pipeline_container {
    width: 100%;
    height: 100%;
    /* padding: 2rem 0;*/
    background-color: var(--dda-surface, #ffffff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.summary-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    padding: 0 0 var(--padding-3xl) 0;
}

.summary-elmt {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.en .summary-elmt {
    padding-left: 16px;
    border-left: 1px solid var(--dda-outline, #E4E2E6);
}

.ae .summary-elmt {
    padding-right: 16px;
    border-right: 1px solid var(--dda-outline, #E4E2E6);
}

.en .summary-elmt:first-child {
    border-left: 1px solid var(--dda-surface, #ffffff);
}

.ae .summary-elmt:first-child {
    border-right: 1px solid var(--dda-surface, #ffffff);
}

.ProjectsListing .summary-row .title {
    color: var(--dda-on-surface-variant);
    font-size: var(--font-body);
    font-family: Dubai;
    font-weight: 400;
    line-height: 1.5rem;
}

.ProjectsListing .summary-row .value {
    color: var(--dda-primary, #00677D);
    font-size: var(--font-h3);
    font-family: Dubai;
    font-weight: 700;
    line-height: var(--line-height-h3);
}

@media (max-width:767px) {
    .ProjectsListing .summary-row {
        flex-direction: column;
    }

    .ProjectsListing .summary-elmt {
        border-left: none;
    }
    .project-body .data-card .value {
        text-align: center;
    } 

}
.project-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding-bottom: var(--padding-lg);
}

.data-card {
    width: 100%;
    padding: 24px;
    background: var(--dda-surface, white);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    border-radius: 16px;
    outline: 1px solid var(--dda-outline, #E4E2E6);
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;    
}
.data-block {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
}

.project-body .data-card .title {
    width: 100%;
    text-align: center;
    color: var(--dda-on-surface);
    font-size: var(--font-body);
    font-family: 'Dubai', sans-serif;
    font-weight: 400;
    line-height: var(--line-height-body);
    word-wrap: break-word;
}
.project-body .data-card .value {
    width: 100%;
    text-align: start;
    color: var(--dda-on-surface);
    font-size: var(--font-h5);
    font-family: 'Dubai', sans-serif;
    font-weight: 400;
    line-height: var(--line-height-h5);
    word-wrap: break-word;
}

div#categories_container {
    width: 100%;
}

.project-desc-row .title {
    color: var(--dda-on-surface);
}

.project-desc-row .value {
    color: var(--dda-on-surface-variant);
}


.project-body .data-block {
    /*margin: 1.5rem;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: end; */
    height: 68px;
}
  

.project-desc {
    /*margin-bottom: 3rem;*/
}


.project-box {
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color: var(--dda-primary, #00677D);
    border-radius: 8px;
    outline: 1px solid var(--dda-outline, #E4E2E6);
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    overflow: hidden;
}

.project-box-content {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.project-title {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    text-align: center;
    font-size: var(--font-h6);
    line-height: var(--line-height-h6);
    word-wrap: break-word;
    color: var(--dda-surface, #ffffff);
}

.project-sector {
    font-weight: 400;
}

.project-separator {
    font-weight: 400;
}

.project-name {
    font-weight: 700;

}
.accordion-header .header-text {
    font-weight: 400;
}

.project-acc .accordion-header .header-text {
    font-weight: 700;
}

.project-body .data-card {
    width: 100%;
    padding: var(--padding-xl);
    background: var(--dda-surface, white);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    border-radius: 16px;
    outline: 1px solid var(--dda-outline, #E4E2E6);
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.project-body .divider {
    width: 100%;
    height: 1px;
    background: var(--dda-outline, #E4E2E6);
    margin: 12px 0;
}

@media (min-width: 768px) {
    .project-body .data-card {
        flex-wrap: nowrap;
    }

    .project-body .data-block {
        flex: 1 1 0;
    }

    .project-body .divider {
        height: auto;
        width: 1px;
        transform: rotate(0deg);
        align-self: stretch;
    }
}

.accordion-container.bg-border {
    padding: var(--padding-lg); 
}

/*Phases styles starts*/
.project-phases-container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.phase-card {
    padding: 16px 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Dubai', sans-serif;
    background-color: white;
    width: 200px;
}

.phase-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.connector-line {
    flex: 1;
    height: 1px;
    border-top: 2px dashed;
}

    .connector-line.outline {
        border-color: var(--dda-outline-variant, #C0C6CF);
    }

.phase-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.phase-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dda-surface-bright);
    border: 4px solid var(--dda-outline-variant, #C0C6CF);
}

.phase-card .checkmark {
    color: var(--dda-on-success, #ffffff);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.phase-card .checkmark {
    display: none;
}

.phase-card.ongoing .phase-circle {
    background-color: var(--dda-primary-variant, #DBF5FF);
    border: 4px solid var(--dda-primary, #00677D);
}

.phase-card.completed .phase-circle {
    background-color: var(--dda-primary, #00677D);
    border: 4px solid var(--dda-primary, #00677D);
}

.phase-card.completed .checkmark {
    display: block;
}

.phase-card.completed .connector-line {
    border-top: 2px solid;
}

    .phase-card.completed .connector-line.outline {
        border-color: var(--dda-primary, #00677D);
    }

.phase-status {
    font-size: var(--font-caption);
    font-weight: 500;
    line-height: var(--line-height-caption);
    letter-spacing: 0.14px;
    text-align: center;
}

.phase-card.ongoing .phase-status {
    color: var(--dda-primary, #00677D);
}

.phase-card.upcoming * {
    color: var(--dda-neutral-60);
}
.phase-status span{
    display:none;
}
.phase-card.completed .phase-status span.status-completed {
    display:inline-block;
}
.phase-card.ongoing .phase-status span.status-ongoing{
    display: inline-block;
}
.phase-card.upcoming .phase-status span.status-upcoming{
    display: inline-block;
}

.phase-details {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: center;
}

.phase-title {
    font-size: var(--font-body);
    line-height: var(--line-height-body);
    font-weight: 400;
    color: var(--dda-on-surface, #000000);
}

.phase-description {
    font-weight: 400;
    font-size: var(--font-caption);
    line-height: var(--line-height-caption);
    letter-spacing: 0.14px;
    color: var(--dda-on-surface-variant);
}
.data-block {
    margin-bottom: 2rem;
}
.PPP_ProjectListing_PhasesPopup .fancybox-content {
    max-height: 450px;
    max-width: 700px;
}

.PPP_ProjectListing_PhasesPopup.fancybox-is-open .fancybox-bg {
    opacity: .4;
}

.PhasesHeading {
    font-size: var(--font-h6);
    line-height: var(--line-height-h6);
    font-weight: 400;
    text-align: center;
}
.aPhaseDesc {
    color: var(--dda-color-primary-40);
}
/*Phases styles ends*/

@media (max-width:767px) {
    .project-phases-container {
        flex-direction: column;
    }
}