/* 

            ######################### CSS TREE MODULE ############################

*/

#treeModule {
    display: block;
    position: relative;
    background-color: rgb(245, 245, 245);
    border: 4px solid steelblue;
    border-radius: 10px;
    height: 800px; /* max height of the container */
    width: 700px;
    margin: auto;
    overflow: auto; /* auto to auto scroll if tree is too big */
    /* resize: both; */ /* user can resize div */
}
/* ######################### HEADER ############################ */
#treeButtonHeader {
    padding: 10px; /* top right bottom left */
    text-align: center;
}

.treeButton {
    background-color: rgb(245, 245, 245);
    padding: 7px 14px; /* top/bottom right/left */

    display: inline-block; /* buttons have to be inline */
    border: 3px solid steelblue;
    border-radius: 10px;

    color: steelblue; /* color for text */
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    font-family: arial, sans-serif;

    /* To avoid selecting the image: */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /*  w ???  */
    -moz-user-select: none; /* Old  Firefox */
    -ms-user-select: none; /* Explorer/Edge */
    user-select: none; /* Chrome, Opera and Firefox */
}

.treeButton:hover {
    background-color: rgb(255, 163, 87); /* change color when hover */
    cursor: pointer; /* "click" cursor effect OVER 9999 !!! */
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.363); /* x, y, blur color */
}

#resetZoomButton {
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
}

/* ##################### TREE CONTAINER ######################## */

.node {
    pointer-events: all;
}
.node rect {
    fill: rgb(245, 245, 245);
    stroke: steelblue;
    stroke-width: 3px;    
}

.node text {
    font-family: Arial, Helvetica, sans-serif;
    font : normal 12px Arial;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.node--internal text {
    font : bold 18px Arial;
    color: #000;
}

.node--pie text {
    font : bold 18px Arial;
}

.pieG text {
    font : normal 12px Arial;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
}

.link text {
    fill: black;
    stroke: none;
    font-family: Arial, Helvetica, sans-serif;
    font : bold 15px Arial;
}

.highlightPieBorder {
    fill: none;
    stroke: none;
}

/* help box */
#InfoBoxFloat {
    opacity: 0;
    position: absolute;
    background-color: rgb(245, 245, 245);				
    text-align: center;	
    max-width: 100px;					
    max-height: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
    z-index: 999;					
    padding: 4px;				
    font: bold 12px sans-serif;		
    background: steelblue;	
    border: 0px;		
    border-radius: 4px;			
    pointer-events: none;			
}