/*** reset CSS ************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

/*** container sizing *****/

body.tree {
  background: #fff;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body.print .tree-container {
  height: 100%;
}

.tree-container {
  margin: 0;
  width: 100%;
}

@media print {
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  /* Prevent page breaks inside the graph */
  .tree-container {
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0;
    width: auto;
    height: 100%;
    overflow: hidden !important;
  }

  /* Use a large custom size to fit the full graph */
  @page {
    margin: 0;
  }
}

/*** graph node appearance */

.personNode {
    padding: 0.5em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #ffffff;
    border: 2px solid #000;
    width: 200px;
    font-family: Tahoma;
    font-size: 12px;
    text-align: center;
    min-height: 8em;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.personNode span.ins {
  color: green;
}

.personNode.ins {
  border: 2px solid green;
}

.personNode.ins p {
  color: green;
}

.personNode span.del {
  color: red;
}

.personNode.del {
  border: 2px solid red;
}

.personNode.del p {
  color: red;
}

.personNode img {
    margin-right:  10px;
}

.personNode p {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
}

.personNode .node-person_name { font-weight: bold;}
.personNode .node-comment { font-style: italic;}
.personNode .node-button { text-decoration: underline; margin-right: 5px; color: grey}
.personNode .node-button:hover { text-decoration: underline; margin-right: 5px; color: blue}