/* ref: https://codepen.io/MarkBoots/pen/NWXdGgz 
  border-style: dashed;  ==> use solid
  --borderW: 2px;  ==> use 3
na
https://codepen.io/JacobLett/pen/ExmqNLb
*/

* { box-sizing: border-box }
[outlines], [outlines] * { outline: 50px solid hotpink }



/*  !!!!!!!  hii huenda ikabadilishwa kutegemea na website chart inatumika   
body { margin: 0; padding: 1rem; min-height: 100vh; display: grid; place-items: center; font-family: sans-serif}
*/


.kablaYaChart
{
  text-align: center;
  color: red;
  font-family: sans-serif;
  font-weight: 600;
}


/* oooooooooooooooooooooooooo    organogram   oooooooooooooooooooo     */
.organogram

{
  --grid-gap: 1rem; 
  display: grid;
  gap: var(--grid-gap);
  color: white;
  font-family: sans-serif;
  font-weight: 600;
}

.organogram>div
{ 
  display: grid; 
  justify-content: start;
  align-items: center;
  position: relative;
}

.organogram>div>span{
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #692FE2, #5360EA); 
}

.organogram>.main>span{
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
// background-image: radial-gradient(circle, white, #5360EA);
  background: linear-gradient(to right, #223344, #5360EA); 
}

.organogram>.sub{
  padding-inline-start: calc(var(--grid-gap) * 2);
}

.organogram>.tl>span{
  background: linear-gradient(to top, #5360EA, #642524); 
}

.organogram>.tc>span{
  background: linear-gradient(to top, #5360EA, #123456); 
}

.organogram>.tr>span{
  background: linear-gradient(to top, #5360EA, #ccbbaa); 
}

.organogram>.cr>span{
  background: linear-gradient(to right, #5360EA, #ddeeff); 
}

.organogram>.br>span{
  background: linear-gradient(to bottom, #5360EA, #dd1122); 
}

.organogram>.bc>span{
  background: linear-gradient(to bottom, #5360EA, #876543); 
}

.organogram>.bl>span{
  background: linear-gradient(to bottom, #5360EA, #cc33aa); 
}

.organogram>.cl>span{
  background: linear-gradient(to left, #5360EA, #ffaaee); 
}


/* &&&  lines &&&  */
.organogram>.sub::after
{
  
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(var(--grid-gap) * 2);
  height: calc(100% + var(--grid-gap));
  
  /* position */
  inset-block-start: auto;
  inset-inline-end: auto;
  inset-block-end: 50%;
  inset-inline-start: var(--grid-gap);
  
  /* border */
  --borderW: 3px;
  --borderR: 0.5rem;
  border-style: solid;
  border-color: #5360EA;
  
  /* border-width */
  border-block-start-width: 0;
  border-inline-end-width: 0;
  border-block-end-width: var(--borderW);
  border-inline-start-width: var(--borderW);
 
  /* border-radius */
  border-end-start-radius: var(--borderR);
}


@media (min-width: 30rem)
{
  .organogram{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'tl tc tr' 'cl cc cr' 'bl bc br';
    text-align: center;
  }

  .organogram>div
{
    grid-area: var(--area);
    justify-content: center;
  }
  
  .organogram>.sub{ padding-inline-start: unset }
  .organogram>.sub>span { 
    padding-block: 1rem; 
    padding-inline: 2rem;
    border-radius: 1rem;
  }

  
  /* set up       |grid-area | position after element  |     border-width      | border-radius */       
  .organogram>.tl {--area: tl; --i-bs: 50%; --i-is: 50%; --bw-be: 1; --bw-is: 1; --br-es: 1}
  .organogram>.tc {--area: tc; --i-bs: 50%; --i-is: 50%; --bw-is: 1}
  .organogram>.tr {--area: tr; --i-bs: 50%; --i-ie: 50%; --bw-be: 1; --bw-ie: 1; --br-ee: 1}
  .organogram>.cl {--area: cl; --i-bs: 50%; --i-is: 50%; --bw-bs: 1}
  .organogram>.cc {--area: cc}
  .organogram>.cr {--area: cr; --i-bs: 50%; --i-ie: 50%; --bw-bs: 1}
  .organogram>.bl {--area: bl; --i-be: 50%; --i-is: 50%; --bw-bs: 1; --bw-is: 1; --br-ss: 1}
  .organogram>.bc {--area: bc; --i-be: 50%; --i-is: 50%; --bw-is: 1}
  .organogram>.br {--area: br; --i-be: 50%; --i-ie: 50%; --bw-bs: 1; --bw-ie: 1; --br-se: 1}


  .organogram>.sub::after{
    width: 100%;
    height: calc(50% + var(--grid-gap) * 1.5);
   
    /* position */
    inset-block-start: var(--i-bs, auto);
    inset-inline-end: var(--i-ie, auto);
    inset-block-end: bar(--i-be, auto);
    inset-inline-start: var(--i-is, auto);
    
    /* border-width*/
    border-block-start-width: calc(var(--borderW) * var(--bw-bs, 0));
    border-inline-end-width: calc(var(--borderW) * var(--bw-ie, 0));
    border-block-end-width: calc(var(--borderW) * var(--bw-be, 0));
    border-inline-start-width: calc(var(--borderW) * var(--bw-is, 0));
    
    /* border-radius */
    border-start-start-radius: calc(var(--borderR) * var(--br-ss, 0));
    border-start-end-radius: calc(var(--borderR) * var(--br-se, 0));
    border-end-end-radius: calc(var(--borderR) * var(--br-ee, 0));
    border-end-start-radius: calc(var(--borderR) * var(--br-es, 0));
  }

}



/* aaaaaaaaaaaaaa a:link  aaaaaaaaaaaaaaaaaaaaaaaaaaaa   */

.organogram a:link {
  text-decoration: none;
}

/* unvisited link */
.organogram a:link {
  color: red;
}

/* visited link */
.organogram a:visited {
  color: green;
}

/* mouse over link */
.organogram a:hover {
  color: green;
}

/* selected link */
.organogram a:active {
  color: blue;
}


/*   mmmmmmmmmmmm   modify individual sections   toa??     mmmmmmmmmmmmmm   */
.organogram .buttonSocialEnterprise {
  background-color: clear;
  border: none;
  color: red;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}



/*  mmmmmmmmm   za Modal ya Bootstrap 5.3  mmmm   max-width: 800px;  modal-fullscreen   mmmm  */
.modal-dialog {
/*     max-width: 800px;  */
     max-width: 70%;
     margin: 10% auto;
  }



.modal-body {
  position:relative;
  padding:0px;
}

.btn-close {
  position:absolute;
  right:-30px;
  top:0;
  background-color: red;
}