/* Organogram Css */

.chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #003366;
    color: white;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    width: 100%;
    max-width: 350px;
    text-align: center;
    position:relative;
}
.box div {
    flex: 1;
}
.box.red {
    border: 3px solid red;
}
.box img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.highlight {
    border: 5px solid red;
    padding: 8px;
}

#childs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    justify-items: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.boxs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #003366;
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 100%; /* allow full width in the grid column */
    max-width:350px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.boxs div {
    flex: 1;
}

.boxs.red {
    border: 3px solid red;
}

.boxs img {
    margin-right: 10px;
}

.boxs i {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: #3a68c8; /* Optional: keep it as per your color preference */
    cursor: pointer;
}

/* Carousel */

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
  width: 3rem;  /* Increased from 2rem */
  height: 3rem;
  position: relative;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: '';
  border: solid black;
  border-width: 0 5px 5px 0; /* Thicker arrow */
  display: inline-block;
  padding: 12px; /* Bigger arrowhead */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.carousel-control-prev-icon::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

.carousel-control-next-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* tt_link_line */
.tt_link{
    stroke:lightblue; 
    fill: none; 
    stroke-width: 1;
}
.tt_link:hover{
    stroke:green; 
    fill: none; 
    stroke-width: 1;
}

/* main_line */
.main_link{
    stroke:blue; 
    fill: none; 
    stroke-width: 2;
    stroke-dasharray:10 5;
}
.main_link:hover{
    stroke:red; 
    fill: none; 
    stroke-width: 2;
    stroke-dasharray:10 5;
}

/* link_line */
.child_link{
    stroke:blue; 
    opacity:10; 
    fill: none; 
    stroke-width: 1;
}
.child_link:hover{
    stroke:blue; 
    opacity:10; 
    fill: none; 
    stroke-width: 1;
}

.back_link{
    stroke:#f07002;  
    opacity:10; 
    fill: none; 
    stroke-width: 1;
  }
  .back_link:hover{
    stroke:#f07002;  
    opacity:10; 
    fill: none; 
    stroke-width: 1;
  }

/***** Arc Class Css *****/
.arc{
    fill:none;
    stroke:none;
    stroke-width:0
}

/***** Label Class Css *****/
.lbl_large{
    font-size: large;
    fill: white;
}
.lbl_large2{
    font-size: large;
    fill: black;
}
.lbl_medium{
    font-size: medium;
}
.lbl_small{
    font-size: small;
}

/*****Center class*****/
.center_class {
    border-radius:6px;
    text-align: center;
    max-height: 190px;
    height: 190px;
    overflow-y: auto;
    font-size:12px;
    color: #00489a;
    font-family: 'Oswald', sans-serif;
}

/**** Shape Class Css ****/

.exclude_area {
    fill: none;
  stroke: none;
  stroke-width: 3;
  }
  
  .exclude_area:hover {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }
  
  .exclude_area-parent {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }
  
  .exclude_area:hover {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }
  
  .main_area {
    fill: none;
  stroke: none;
  stroke-width: 3;
  }
  
  .main_area:hover {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }
  
  .main_area-parent {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }
  
  .main_area:hover {
    fill: none;
    stroke: none;
    stroke-width: 1;
  }

/*main1*/
.main1 {
    fill: white ;
    stroke: #19BB8B ;
    stroke-width:4 ;
}

.main1:hover {
    fill: white ;
    stroke: #19BB8B;
    stroke-width:4 ;
}

.main1-parent {
    fill: white ;
    stroke: #19BB8B;
    stroke-width:4 ;
}

.main1-parent:hover {
    fill: white ;
    stroke: #19BB8B ;
    stroke-width:4 ;
}

/*main1*/
.kra {
    fill: #A337A0 ;
    stroke: white ;
    stroke-width:4 ;
}

.kra:hover {
    fill: #A337A0 ;
    stroke: white;
    stroke-width:4 ;
}

.kra-parent {
    fill: #A337A0 ;
    stroke: white;
    stroke-width:4 ;
}

.kra-parent:hover {
    fill: #A337A0 ;
    stroke: white ;
    stroke-width:4 ;
}

/* Measure */
.measure {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.measure:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.measure-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.measure-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Output */
.output {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.output:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.output-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.output-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Outcome */
.outcome {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.outcome:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.outcome-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.outcome-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Dependency */
.dependency {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.dependency:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.dependency-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.dependency-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Responsibility */
.responsibility {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.responsibility:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.responsibility-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.responsibility-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Directorate */
.directorate {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.directorate:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.directorate-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.directorate-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Subdirectorate */
.subdirectorate {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.subdirectorate:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.subdirectorate-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.subdirectorate-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Divisionsection */
.divisionsection {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.divisionsection:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.divisionsection-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.divisionsection-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Activitypurpose */
.activitypurpose {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.activitypurpose:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.activitypurpose-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.activitypurpose-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Outputindicator */
.outputindicator {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.outputindicator:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.outputindicator-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.outputindicator-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Performance */
.performance {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.performance:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.performance-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.performance-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Elementlist */
.elementlist {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.elementlist:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.elementlist-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.elementlist-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Gmtstrategicfocusarea */
.gmtstrategicfocusarea {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.gmtstrategicfocusarea:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.gmtstrategicfocusarea-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.gmtstrategicfocusarea-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Jdma */
.jdma {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.jdma:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.jdma-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.jdma-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Annualreport */
.annualreport {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.annualreport:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.annualreport-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.annualreport-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Sdip */
.sdip {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.sdip:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.sdip-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.sdip-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* G4j */
.g4j {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.g4j:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.g4j-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.g4j-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Wellbeing */
.wellbeing {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.wellbeing:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.wellbeing-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.wellbeing-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Safety */
.safety {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.safety:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.safety-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.safety-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Vip */
.vip {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.vip:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.vip-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.vip-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Onecape */
.onecape {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.onecape:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.onecape-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.onecape-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Psdf */
.psdf {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.psdf:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.psdf-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.psdf-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Pltf */
.pltf {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.pltf:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.pltf-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.pltf-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Wcif */
.wcif {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.wcif:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.wcif-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.wcif-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Mandate */
.mandate {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.mandate:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.mandate-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.mandate-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Ndp */
.ndp {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.ndp:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.ndp-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.ndp-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Mtsf */
.mtsf {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.mtsf:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.mtsf-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.mtsf-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* AU */
.au {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.au:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.au-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.au-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Parisagreement */
.parisagreement {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.parisagreement:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.parisagreement-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.parisagreement-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* SPI */
.spi {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.spi:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.spi-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.spi-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* SDGUN */
.sdgun {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.sdgun:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.sdgun-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.sdgun-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Basichumanneeds */
.basichumanneeds {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.basichumanneeds:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.basichumanneeds-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.basichumanneeds-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Foundationofwellbeing */
.foundationofwellbeing {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.foundationofwellbeing:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.foundationofwellbeing-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.foundationofwellbeing-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Opportunity */
.opportunity {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.opportunity:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.opportunity-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.opportunity-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
} 

/* Program */
.program {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.program:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.program-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.program-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Subprogram */
.subprogram {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.subprogram:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.subprogram-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.subprogram-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Project */
.project {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.project:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.project-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.project-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* Region */
.region {
    fill: white;
    stroke: none;
    stroke-width: 1;
}
.region:hover{
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}
.region-parent {
    fill: red;
    stroke: #fff;
    stroke-width: 1;
}
.region-parent:hover {
    fill: green;
    stroke: #fff;
    stroke-width: 1;
}

/* job */
.jobtitle1 {
    fill: #13AC7F;
    stroke: white;
    stroke-width: 1;
}
.jobtitle1:hover{
    fill: #13AC7F;
    stroke: white;
    stroke-width: 1;
}
.jobtitle1-parent {
    fill: #13AC7F;
    stroke: white;
    stroke-width: 1;
}
.jobtitle1-parent:hover {
    fill: #13AC7F;
    stroke: white;
    stroke-width: 1;
}

.jobtitle2 {
    fill: #E86783;
    stroke: white;
    stroke-width: 1;
}
.jobtitle2:hover{
    fill: #E86783;
    stroke: white;
    stroke-width: 1;
}
.jobtitle2-parent {
    fill: #E86783;
    stroke: white;
    stroke-width: 1;
}
.jobtitle2-parent:hover {
    fill: #E86783;
    stroke: white;
    stroke-width: 1;
}

.jobtitle3 {
    fill: #1F6EB5;
    stroke: white;
    stroke-width: 1;
}
.jobtitle3:hover{
    fill: #1F6EB5;
    stroke: white;
    stroke-width: 1;
}
.jobtitle3-parent {
    fill: #1F6EB5;
    stroke: white;
    stroke-width: 1;
}
.jobtitle3-parent:hover {
    fill: #1F6EB5;
    stroke: white;
    stroke-width: 1;
}

.kraff {
    fill: #b07ff4;
    stroke: #bea3e4;
    stroke-width: 1;
}
.kraff:hover{
    fill: #b07ff4;
    stroke: #bea3e4;
    stroke-width: 1;
}
.kraff-parent {
    fill: #b07ff4;
    stroke: #bea3e4;
    stroke-width: 1;
}
.kraff-parent:hover {
    fill: #b07ff4;
    stroke: #bea3e4;
    stroke-width: 1;
}

.krafs {
    fill: #FC95AA;
    stroke: #FC95AA;
    stroke-width: 1;
}
.krafs:hover{
    fill: #FC95AA;
    stroke: #FC95AA;
    stroke-width: 1;
}
.krafs-parent {
    fill: #FC95AA;
    stroke: #FC95AA;
    stroke-width: 1;
}
.krafs-parent:hover {
    fill: #FC95AA;
    stroke: #FC95AA;
    stroke-width: 1;
}

.kraocd {
    fill: #7EB3E2;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.kraocd:hover{
    fill: #7EB3E2;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.kraocd-parent {
    fill: #7EB3E2;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.kraocd-parent:hover {
    fill: #7EB3E2;
    stroke: #7EB3E2;
    stroke-width: 1;
}

.jd {
    fill: #797EE5;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.jd:hover{
    fill: #797EE5;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.jd-parent {
    fill: #797EE5;
    stroke: #7EB3E2;
    stroke-width: 1;
}
.jd-parent:hover {
    fill: #797EE5;
    stroke: #7EB3E2;
    stroke-width: 1;
}