:root{
    --tree-line-weigth: 0.4vw;
    --tree-left-line-length:5vw;
    --tree-text-line-length:3vw;

    --tree-text-min-height: 4vw;
    --tree-text-padding-bottom: 2vw;
    --tree-text-padding-left:1vw;
}

.tree-entire-line-container{
    height: auto;
    display: flex;
    align-items: stretch;
}
.tree-left-line-container{
    width: var(--tree-left-line-length);
}
.tree-left-line{
    width: 100%;
    height: var(--tree-line-weigth);
    background-color: var(--color-dark);
}
.tree-vertical-line-container{
    width: var(--tree-line-weigth);
}
.tree-vertical-line{
    background-color: var(--color-dark);
    height: 100%;
}
.tree-vertical-line-bottomCap{
    width: 100%;
    height: var(--tree-line-weigth);
    background-color: vaR(--color-dark);
}
.tree-textSide-line-container{
    width: var(--tree-text-line-length);
}
.tree-textSide-line{
    width: 100%;
    height: var(--tree-line-weigth);
    background-color: var(--color-dark);
    border-top-right-radius: 1vw;
    border-bottom-right-radius: 1vw;
}
.tree-textSide-text-container{
    width: 100%;
}
.tree-textSide-text{
    position:relative;
    top:-1.2vw;
    width: 100%;
    min-height: var(--tree-text-min-height);
    height: auto;
    padding-left: var(--tree-text-padding-left);
    padding-bottom: var(--tree-text-padding-bottom);
}
.invisible{
    background-color: transparent;
}
/***********************************/
/***********************************/
/*            MOBILE               */
/***********************************/
/***********************************/
@media screen and (max-width: 768px) and (orientation: portrait){
    :root{
        --tree-line-weigth: 0.5128vw;
        --tree-left-line-length:var(--lr-spacing-mob);
        --tree-text-line-length:calc(var(--lr-spacing-mob)*2);
    
        --tree-text-min-height: 4vw;
        --tree-text-padding-bottom: 2vw;
        --tree-text-padding-left:1vw;
    }

    .tree-textSide-text{
        top:-2.6vw;
    }
}