/* Overall styles */
.hierarchy-search {
    margin-top: 5px;
}

.hierarchy-search-eppo {
    text-transform: uppercase;
}

div.hierarchy {
    white-space: nowrap;
    overflow-x: auto;
}

/* General styles for the lines */
div.hierarchy-node::after, 
div.hierarchy-node::before, 
div.hierarchy-node-content::after, 
div.hierarchy-node-content::before {
    cursor: auto;
}

    /* General style for node container */
    div.hierarchy div.hierarchy-node-container {
        vertical-align: top;
        overflow: hidden;
    }

    div.hierarchy div.hierarchy-children-node-container {
        display: inline-block;
        position: relative;
    }

    /* General node styles */
    div.hierarchy div.hierarchy-node-container div.hierarchy-node {
        border: 1px solid rgba(0,0,0,0.2);
        margin: 16px;
        min-width: 120px;
        float: left;
        border-radius: 2px;
        box-shadow: 0 2px 0 rgba(0,0,0,0.1);
        white-space: normal;
        cursor: pointer;
        position: relative;
    }

    div.hierarchy div.hierarchy-node-content {
        padding: 1em;
    }

    div.hierarchy div.hierarchy-node-current {
        border: 1px solid rgba(0,0,0,0.3);
    }

    /*********************************************/
    /* Styles for the lines connecting the nodes */
    /*********************************************/

    div.hierarchy div.hierarchy-children-node-container div.hierarchy-node-container div.hierarchy-node::before, /* The child nodes */
    div.hierarchy div.hierarchy-children-node-container + div.hierarchy-node > ::after, /* The parent node */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container > div.hierarchy-node::after /* The vertical line */ {
        content: '';
        background-color: rgba(0,0,0,0.2);
        position: absolute;
    }

    /***********************************/
    /* Styles for the horizontal lines */
    /***********************************/

    /* General style for the lines going horizontally from a node */
    div.hierarchy div.hierarchy-children-node-container > div.hierarchy-node-container > div.hierarchy-node::before, /* The child nodes */
    div.hierarchy div.hierarchy-children-node-container + div.hierarchy-node > ::after { /* The parent node */
        height: 1px;
        width: 15px;
    }

    /* Specific style for the lines going horizontally to the left from a node */
    /* First child, not only child */
    div.hierarchy div.hierarchy-children-node-container > div.hierarchy-node-container:first-of-type > div.hierarchy-node::before {
        left: -16px;
        top: 15px;
    }

    /* Last child, not only child */
    div.hierarchy div.hierarchy-children-node-container > div.hierarchy-node-container:last-of-type:not(:only-child) > div.hierarchy-node::before {
        left: -16px;
        top: 15px;
    }

    /* Middle child, not only child */
    div.hierarchy div.hierarchy-children-node-container > div.hierarchy-node-container:not(:first-of-type):not(:last-of-type):not(:only-child) > div.hierarchy-node::before {
        left: -16px;
        bottom: 50%;
    }

    /* Specific style for the lines going horizontally to the right from a node */
    div.hierarchy div.hierarchy-children-node-container + div.hierarchy-node > ::after {
        width: 16px;
        right: -17px;
        top: 15px;
    }

    /***********************************/
    /* Styles for the vertical lines   */
    /***********************************/

    /* General style for the line going vertically from line to line */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container > div.hierarchy-node::after {
        width: 1px;
        height: calc(100% + 10000px);
        left: -17px;
    }

    /* Specific style for the line going vertically from the first sibling */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container:first-of-type > div.hierarchy-node::after {
        top: 15px;
    }

    /* Specific style for the line going vertically from the middle siblings */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container:not(:first-of-type):not(:last-of-type) > div.hierarchy-node::after {
        top: -17px;
    }

    /* Specific style for the line going vertically from the last sibling */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container:last-of-type > div.hierarchy-node::after {
        top: 16px;
        transform: translateY(-100%);
    }

    /* Specific style for the line going vertically from the only sibling */
    div.hierarchy div.hierarchy-node-container div.hierarchy-children-node-container div.hierarchy-node-container:only-child > div.hierarchy-node::after {
        bottom: 10px;
        height: 1px;
    }