.level-0 {
    list-style-type: none; /* Hide markers for level-0 list */
  
    
}
.level-0 > li{
    border:solid 3px #cccccc;
    margin-top: 20px;
}
.level-0 >  li >div > span{
    position: relative;    
    background-color:#f5f5f5;
    list-style-type: none;
    padding: 13px;
    cursor:pointer;
    display: block;
    width: 100%;
    font-weight:bolder;
    font-size:large;
}

.expanded > span::after
{
     content: "<" !important;
     position: absolute;
     right: 10px;
     top: 50%;
     width: 0.5em;
     color: #666565;
     transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5) !important;
     font-size: 2.0em;
     font-weight: 400;
     min-height: max-content;
}
 
.level-0 > li>div  > span::after {
     content: ">";
     position: absolute;
     right: 20px;
     top: 50%;
     width: 0.5em;
     color: #000000;
     transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5);
     font-size: 2.0em;
     font-weight: 500;
     min-height: max-content;
}
.level-0 > li > .clickable-container {
    cursor: pointer;
    border-bottom: 2px solid #f5f5f5 ;
}
.level-0 > li > .clickable-container > div {
    display: flex;
    justify-content: space-between;
     align-items: center;
     padding: 10px;
 }

 .expanded >  ul
{
    display:block;
}

 

.level-0 > li > .clickable-container > div > span {
    flex-grow: 1;
    padding: 10px;
    border: 2px solid #666565;
    background-color:#eee;
    list-style-type: none;
    cursor:pointer;
}

.level-0 > li > .clickable-container > div > span::after {
    transform: translateY(-50%)rotate(-90deg)scaleX(1.0)scaleY(1.5);
}
.level-1 {
    display:none;
    border: none;
    background-color: none;
    list-style-type: none;
    padding-bottom:10px;
}

.level-1 > li   {
    padding: 5px 15px 5px 5px;
}
.level-1 > li >  div>  span > a
{
   position: relative; /* Ensure the pseudo-element is positioned relative to the link */
   display: list-item; /* Ensure it behaves like a list item */
   margin-left: 20px; /* Adjust the margin to align bullets properly */
   list-style: none;
   font-weight: normal;
}
.level-1 > li >  div>  span > a::before {
    content: ''; /* No text content */
    position: absolute;
    left: -20px; /* Position the bullet to the left of the link */
    top: 50%;
    transform: translateY(-50%);
    width: 7px; /* Adjust the size of the bullet */
    height: 7px; /* Adjust the size of the bullet */
    background-color: black; /* Fill the bullet with black color */
    border-radius: 50%; /* Make the bullet a circle */
    
}
.hide-after::after {
    display: none !important;
}
.hide-after::before {
    display: none !important;
}
.level-1 > li >  div> span{
    font-size:large;
    font-weight:bold;
    display: block;
    position: relative;
    padding: 5px;
    cursor: pointer;
}


.level-1 > li >  div> span::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px; /* Adjust the height of the horizontal line */
    background-color: #707070; /* Set the color of the horizontal line */
    position: absolute;
    bottom: 0;
    left: 0;
}
.level-1 > li > div> span::after {
    position: absolute;
    content:'+';
    right: 10px;
    top: -30%;
    color: #000000;
    /* transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5) !important; */
    font-size: 2.0em;
    font-weight:600;
    cursor: pointer;
}

.level-1 > li > .open > span::before {
    display:none;
}



.level-1 > li > .open > span::after{

position: absolute;
cursor:pointer;
content:'-';

right: 10px;

top: -80%;

color: #000000;

/* transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5) !important; */

font-size: 3em;

font-weight: 600;
}


.level-2 > li>div  > span::after {
     content: ">";
     position: absolute;
     right: 10px;
     top: 50%;
     width: 0.5em;
     color: #999;
     transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5);
     font-size: 1.5em;
     font-weight: 500;
     min-height: max-content;
}

.level-2 >  li >div > span
{display: block;position: relative;font-weight:bold;padding: 10px;}

.level-2 >li>.open > span::after
{
     content: "<" !important;
     position: absolute;
     right: 10px;
     top: 50%;
     width: 0.5em;
     color: #999;
     transform: translateY(-50%)rotate(90deg)scaleX(1.0)scaleY(1.5);
     font-size: 1.5em;
     font-weight: 500;
     min-height: max-content;
}





.level-2 > li >  div> span::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px; /* Adjust the height of the horizontal line */
    background-color: #707070; /* Set the color of the horizontal line */
    position: absolute;
    bottom: 0;
    left: 0;
}
li:has(> div.open):has(> ul.level-3)::after {
       content: '';
       display: block;
       width: 100%;
       height: 1px; /* Adjust the height of the horizontal line */
       background-color: #707070; /* Set the color of the horizontal line */
   
       left: 0px;
       right: 0px;
 }
.level-2 > li > .open > span::before {
    display:none;
}

 .hide-after > a {
    position: relative;
    display: inline-block;
    padding-left: 20px; /* Add space for the bullet */
}
 .hide-after > a {
     padding: 3px;
 }
.hide-after > a::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; /* Adjust the size of the bullet */
    height: 5px; /* Adjust the size of the bullet */
    background-color: black; /* Fill the bullet with black color */
    border-radius: 50%; /* Make the bullet a circle */
}
.level-2
{
    display:none;
    cursor:pointer;
}
.level-3{
    display:none;
    cursor:pointer;
}

.level-4{
    display:none;
    cursor:pointer;
}
.spinner {
    width: 40px; /* Adjust the size of the spinner */
    height: 40px; /* Adjust the size of the spinner */
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
#spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh; /* Adjust the height as needed */
    
}

.level-3 > li > .child-class > span::before{
     content:'';
     position: absolute;
     width: 5px;
     height: 5px;
     background-color: black;
     border-radius: 50%;
     top: 45%;
     /* left: -5%; */
     margin-left: -20px;
}
.level-3 > li > .child-class > span {
    position: relative;
    display: inline-block;
}
 


.level-4 > li > .child-class > span::before{
     content:'';
     position: absolute;
     width: 5px;
     height: 5px;
     background-color: black;
     border-radius: 50%;
     top: 45%;
     /* left: -5%; */
     margin-left: -20px;
}
.level-4 > li > .child-class > span {
    position: relative;
    display: inline-block;
}

.level-4 {
    display:block !important;
}