.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}
.search-result h3 {
  margin-bottom: 0;
  color: #1E0FBE;
}

.search-result .search-link {
  color: #006621;
}

.search-result p {
  font-size: 12px;
  margin-top: 5px;
}

.hr-line-dashed {
  border-top: 1px dashed #E7EAEC;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px;
  margin: 20px 0;
}

.li-item{
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700&display=swap');

body { 
  background-color: #1f2740; 
  margin: 0 auto;
}
svg { color: #ffa4a4; }
.st3,.st4{
  fill:#ffcb2f;
  stroke:#12192c;
  stroke-width:1.5;
}
.st4 { fill:#69b2b1; }
text {
  fill: white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.5rem;
}
text + text { font-size: 1rem;}
.line {
  fill:none;
  stroke:#f65a6d;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.line.green { stroke: #69b3b2; }
.ceo { --borderColor: #ffcb2f; }
.coo, .ciso, .cto, .cro { --borderColor: #69b3b2; }
.am, .tl, .pl, .dev, .ui, .do { color: #f65a6d; }

.orgchart {
  background: rgb(250, 249, 249);
}

.orgchart .node  {
  background-color: #fff;
  color: #000;
  margin-left: 5px;
}

.orgchart .node .title {
  background-color: #fff;
  color: #000;
  width: 200px !important;
  height: 95px !important;
}

.orgchart .node .titlefemale {
  background-color: #fff;
  color: #000;
  width: 200px !important;
  height: 95px !important;
}

.orgchart .node .title:hover {
  background-color: #fff;
  color: #000;
  width: 250px !important;
  height: 95px !important;
  text-align: center;
}

.orgchart .node .titlefemale:hover {
  background-color: #fff;
  color: #000;
  width: 250px !important;
  height: 95px !important;
  text-align: center;
}

.orgchart .node .content {
  border-color: transparent;
  border-top-color: #333;
  font-weight: bold;
  display: none;
}

.orgchart .node:hover {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node.focused {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node .edge {
  color: rgba(0, 0, 0, 0.6);
}

.orgchart .edge:hover {
  color: #000;
}

.orgchart td.left,
.orgchart td.top,
.orgchart td.right {
  border-color: #fff;
}

.orgchart td>.down {
  background-color: #fff;
}

.memimg {
height: 60px;
width: 60px;
background-color: red;
}

.orgchart .node .title {
  height: unset;
  text-align: left;
  line-height: 40px;
  width: 150px;
  height:50px;
}
.orgchart .node .content {
  text-align: left;
  padding: 5px;
}
.orgchart .node .content .symbol {
  color: #aaa;
  margin-right: 20px;
}
.oci-leader::before, .oci-leader::after {
  background-color: rgba(217, 83, 79, 0.8);
}
.orgchart .node .avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  float: left;
  margin: 5px;
}

.tabs-wrap { overflow: visible; }                 /* ensure parent doesn’t clip */
.tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #ccc;
    overflow: auto;                               /* <-- allow scrolling */
    -webkit-overflow-scrolling: inherit ;
    scrollbar-width: thin;
  }
.tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f2f2f2;
    border-radius: 6px 6px 0 0;
    /*white-space: nowrap;                            /* keep labels on one line */
    flex: 0 0 auto;                                 /* don’t shrink and get clipped */
    position: relative;
    z-index: 1;
  }
.tab.active {
    background: #fffff0;
    font-weight: 600;
    font-size: larger;
    z-index: 2;      
    position: relative;     
  }
.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 0 6px 6px 6px;
    margin-top: -1px;
    background: #fff;
    overflow: auto;
    min-height: 300px; 
    width: 100%;
  }
.tab-content.active { display: block; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 16px; }
ul.tree, .tree ul { list-style: none; padding-left: 1rem; margin: 0; }
.tree li { margin: .25rem 0; position: relative; }
.node { padding: .2rem .4rem; border: 1px solid #ddd; border-radius: 6px; background: #fff; display: inline-block; }
.title { color: #666; font-size: .9em; margin-left: .5rem; }

 :root { --pad: 14px; }

    .tree { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
    .tree ul { list-style: none; margin: 0; padding-left: var(--pad); }
    .tree li { margin: 4px 0; }

    .node-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #e5e7eb;
      background: #fff;
      border-radius: 8px;
      padding: 4px 8px;
    }

    /* Toggle button */
    .toggle {
      width: 18px; height: 18px;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      background: #f8fafc;
      cursor: pointer;
      display: inline-grid;
      place-items: center;
      padding: 0;
    }
    .toggle-icon { transition: transform .15s ease; font-size: 12px; line-height: 1; }
    [aria-expanded="false"] .toggle-icon { transform: rotate(-90deg); }

    /* Hide toggle for leaves */
    .leaf .toggle { visibility: hidden; }

    /* Collapsed children */
    .collapsed { display: none; }

    .title { color: #64748b; font-size: .9em; margin-left: 6px; }

#chart-container {
  min-height: 300px; width: 100%;
  
} 

#tab2Content {
  min-height: 300px; width: 100%;
  
} 
#tab2  {
  min-height: 300px; width: 100%;
  
}