/* 
    Created on : Nov 22, 2021, 7:04:33 PM
    Author     : nganze2
*/

/* Remove margins and padding from the parent ul */
.myUL {
    margin: 0;
    padding: 0;
}

.myUL ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}

.myUL ul li {
    position: relative;
    padding-left: 20px; /* Space for the line and circle */
}

/* 1. The Empty Circle (using the ::before pseudo-element) */
.myUL ul li::before {
    content: '';
    position: absolute;
    left: 5px; /* Adjust position relative to padding-left */
    top: 10px; /* Center vertically (adjust based on line-height/font-size) */
    width: 6px;
    height: 6px;
    border: 1px solid #000; /* Black border for the empty circle */
    border-radius: 50%; /* Makes it a circle */
    background-color: transparent;
}

/* 2. The Connecting Lines (using the ::after pseudo-element) */
.myUL ul li::after {
    content: '';
    position: absolute;
    left: 8px; /* Must align with the center of the circle (5px + 1px border + 2px offset) */
    top: 0; /* Starts at the top of the current li */
    bottom: 50%; /* Ends half way down */
    width: 0;
    border-left: 1px dashed #ccc; /* Vertical dashed line */
}

/* Connect to the next item (adjusting the previous item's line) */
.myUL ul li:not(:last-child)::after {
    bottom: -5px; /* Extend line to connect to the next item's circle */
}

/* Horizontal line connecting to the circle */
.myUL ul li a::before {
    content: '';
    position: absolute;
    left: -15px; /* Position relative to the list item start */
    top: 13px; /* Align with the vertical center of the circle */
    width: 15px;
    height: 0;
    border-top: 1px dashed #ccc; /* Horizontal line */
}