/* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --lightblue: #03D2FE;
  --green1: #BAE190;
  --green2: #DAF0C2;
  --purple1: #B4B0FA;
  --purple2:#E0DFFE;
  --yellow1:#FFC000;
  --yellow2:#FEFEB6;
  --pink1:#FF99FF;
  --pink2:#FEC2FE;
  --orange1:#FFCB99;
  --orange2:#FDDCBB;
  --black: black;
  --line: #777;
}
.bg-lightblue {background-color: var(--lightblue);}
.bg-green1 {background-color: var(--green1);}
.bg-green2 {background-color: var(--green2);}
.bg-purple1 {background-color: var(--purple1);}
.bg-purple2 {background-color: var(--purple2);}
.bg-yellow1 {background-color: var(--yellow1);}
.bg-yellow2 {background-color: var(--yellow2);}
.bg-pink1 {background-color: var(--pink1);}
.bg-pink2 {background-color: var(--pink2);}
.bg-orange1 {background-color: var(--orange1);}
.bg-orange2 {background-color: var(--orange2);}




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ol {
  list-style: none;
}

.container {
  max-width: 1000px;
  padding: 0 10px;
  margin: 0 auto;
}

.rectangle {
  position: relative;
  padding:10px 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.chart-s-dms {
    font-family: "Prompt", sans-serif;
    font-weight: 400;
    text-align: center;
    font-style: normal;
}
.chart-s-dms a{ color: var(--black); text-decoration: none;}
.chart-s-dms h1 {font-size: 18px;}
.chart-s-dms h2 {font-size: 16px;}
.chart-s-dms h3 {font-size: 14px;}
@media screen and (max-width: 576px) {
  .chart-s-dms a{ color: var(--black); text-decoration: none;}
  .chart-s-dms h1 {font-size: 13px;}
  .chart-s-dms h2 {font-size: 12px;}
  .chart-s-dms h3 {font-size: 11px;}
  .chart-s-dms h4 {font-size: 10px;}

}



/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
  width: 50%;
  margin: 0 auto 40px;
  background: var(--lightblue);
}


.level-1::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 80px;
  background: var(--line  );
}

.level-1-wrapper::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -52%;
    width: 52%;
    height: 2px;
    background: var(--line);
}

.pb-20{ padding-bottom: 20px !important;}

.mb-20{ margin-bottom: 20px !important;}
/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.level-2-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: var(--line);
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: calc(100% + 20px);
  height: 2px;
  background: var(--line);
}

.level-2-wrapper li {
  position: relative;
}

.level-2-wrapper > li::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--line);
}

.level-2 {
  width: 70%;
  margin: 0 auto 40px;
  background: var(--lightblue);
}

/* .level-2::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 20px;
  background: var(--black);
} */

.level-2::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 20px;
  height: 2px;
  background: var(--line);
}


.advisor {
    align-self: flex-end;
    margin-right: 50px;
    width: 30%;
}

/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  width: 100%;
  margin: 0 auto;
}

.level-3-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(11.5% + 2px);
  width: calc(76% + 6px);
  height: 2px;
  background: var(--line);
}

.level-3-wrapper > li::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2px;
  height: 90px;
  background: var(--line);
}

.level-3 {
  margin-bottom: 20px;
  background: var(--level-3);
}


/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrapper {
  position: relative;
  width: 90%;
  margin:0 auto;
}



.level-4-wrapper li + li {
  margin-top: 20px;
}

.level-4 {
  font-weight: normal;
   
}

li:first-child .level-4::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 2px;
  height: 40px;
  background: var(--line);
}

.level-4-no-line::before {position: unset !important; width: 0 !important; height: 0 !important; }


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 700px) {
  .rectangle {
    padding: 10px 20px ;
  }

  .level-1,
  .level-2 {
    width: 100%;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2-wrapper > li::before {
    display: none;
  }
 .level-1:first-child:before {
    display: block;
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: var(--line  );
  }
    .advisor {
        align-self: flex-end;
        margin-right: 50px;
        width: 30%;
    }
    .level-1-wrapper {
        width: 90%;
        margin-left: 10%;
    }

        .level-1-wrapper level2 {
            width: 90%;
            margin-left: 10%;
        }

        .level-1-wrapper::before {
            left: -20px;
            width: 2px;
            height: calc(100% + 10px);
        }

  .level-2-wrapper,
  .level-2-wrapper::after,
  .level-2::after {
    display: block;
  }

  .level-2-wrapper {
    width: 90%;
    margin-left: 10%;
  }

  .level-2-wrapper::before {
    left: -20px;
    width: 2px;
    height: calc(100% + 10px);
  }


  .level-2-wrapper::after {
     
    width: 0;
     
}
  .level-2-wrapper > li:not(:first-child) {
    margin-top: 20px;
  }

.level-2-wrapper li:not(:last-child) .level-2 { margin-bottom: 20px !important;}

/*.level-2 {
  
  margin: 0 auto 0px;}*/

  .level-3-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 20px;
    width: 90%;
    margin: 0 auto;
   /*  display: flex;
    flex-direction: row; */
     
  }
  .level-3-wrapper li {   display: grid;
     }
 
  .level-3-wrapper  li { margin-top: 10px;} 

   

  /*  .level-3-wrapper  li:nth-child(3) .level-4-wrapper li:first-child .level-4::before { width: 0;}
   .level-3-wrapper  li:nth-child(4) .level-4-wrapper li:first-child .level-4::before { width: 0;} */


  .level-3-wrapper > li::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -20px;
    transform: translate(-50%, -100%);
    width: 2px;
    height: 0px;
    background: var(--line);
  }

  .level-3-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: calc(11.5% + 2px);
    width: calc(76% + 6px);
    height: 0px;
    background: var(--line);
  }
  
  .level-4-wrapper {
    width: 100%;
    margin-left: 5.55%;
  }
  .level-4-wrapper::before {
    left: -20px;
    width: 2px;
    height: calc(100% + 40px);}

    .level-4-wrapper::after {

      width: calc(100%    );
    }

    
    .level-4::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-100%, -50%);
    width: 2px;
    height: 2px;
    background: var(--line);
  }
  .level-4-wrapper::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 2px;
    height: calc(100% + 20px);
    background: var(--line);
  }  


.level-3-wrapper li:last-child .level-4-wrapper::before {
  
  height: 50px;
   
}  


  li:first-child .level-4::before {
  
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-100%, -50%);
    width: 20px;
    height: 2px;
    background: var(--line);
  }
}


/* bullet color 
-------------------------------------------------- */
.ul-inline-color { padding: 10px; margin:10px auto;list-style: none;}
.ul-inline-color li { display: inline-block;  text-align: left;
font-size: 11px;color: var(--line);
}

.ul-inline-color li .bullet-color { border-radius: 4px; height: 10px; width: 40px; margin:0 5px 0px 20px; display: inline-block;}
@media screen and (max-width: 576px) {
  .ul-inline-color li{ width: 100%; 
    display: grid; grid-template-columns: 50px auto; grid-column-gap: 10px;}
    
  .ul-inline-color li .bullet-color {margin:4px 5px ;}
    .rectangle {
        padding: 10px; text-align: left;line-height: 1.2;
    }
    .level-3-wrapper li:last-child .level-4-wrapper::before {
  
      height: 46px;
       
    }  
}

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.page-footer a {
  margin-left: 4px;
}
 */

.my-20 { margin-top: 20px; margin-bottom: 20px;}

.m-20 { margin: 20px;}