/* Remove default bullets */
.treeContainer, .treeContainer ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    white-space: nowrap;
    line-height: 2rem;
}



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


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

/* 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: "\203A";
        color: #bbbcc3;
        text-shadow: 0 0 3px #b1abab;
        display: inline-block;
        margin-right: 6px;
        transform: rotate(0deg);
        transition: linear 0.15s;
        font-size: 20px;
        padding-left: 8px;
        padding-right: 8px;
    }



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


/* Hide the nested list */
.nested {
    height: 0;
    /*width: 0;*/
    opacity: 0.0;
    overflow: hidden;
    transition: linear 0.10s;
    /*display: none;*/
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
    .nested.active {
        height: 100%;
        /*width: 100%;*/
        opacity: 1.0;
        transition: linear 0.25s;
        /*display: block;*/
    }